Bilgi ve Hata Mesajları

Bu bölümün görüntülenmesi info.tpl dosyasında yapılandırılabilir. Bu bölümde hata veya başarılı tamamlanma formu için şablon yapılandırılır.

Kullanılabilir Etiketler

Etiket	Açıklama
`{title}`	Mesaj başlığı.
`{error}`	Mesaj metni.

Kullanım Örnekleri

Tipik Kullanım Senaryoları

info.tpl şablonu genellikle aşağıdaki durumlarda kullanılır:

Başarılı işlemlerin bildirilmesi (örn. Kayıt başarılı, yorum gönderildi)
Hata mesajlarının gösterilmesi (örn. Giriş başarısız, yetkisiz erişim)
Sistemdeki değişikliklerin bildirilmesi (örn. Bakım modu, yeni özellikler)
Kullanıcı eylemlerinin onaylanması (örn. Parola sıfırlama bağlantısı gönderildi)

Temel Bilgi/Hata Şablonu

<div class="info-message-wrap">
    <div class="info-message {message-class}">
        <div class="info-message-title">
            <h2>{title}</h2>
        </div>
        
        <div class="info-message-content">
            <p>{error}</p>
        </div>
        
        <div class="info-message-buttons">
            <a href="/" class="home-button">Ana Sayfaya Dön</a>
            <a href="javascript:history.go(-1);" class="back-button">Geri Dön</a>
        </div>
    </div>
</div>

Farklı Mesaj Türleri

Modern Bilgi/Hata Şablonu

<div class="message-container">
    <!-- Bilgi türüne göre simge ve renk değişir -->
    <div class="message-wrapper {message-class}">
        <div class="message-icon">
            <!-- Hata mesajı için -->
            [error]<i class="fas fa-exclamation-circle"></i>[/error]
            
            <!-- Başarı mesajı için -->
            [success]<i class="fas fa-check-circle"></i>[/success]
            
            <!-- Bilgi mesajı için -->
            [info]<i class="fas fa-info-circle"></i>[/info]
            
            <!-- Uyarı mesajı için -->
            [warning]<i class="fas fa-exclamation-triangle"></i>[/warning]
        </div>
        
        <div class="message-content">
            <h2 class="message-title">{title}</h2>
            <div class="message-text">{error}</div>
            
            <div class="message-actions">
                [error-login]
                <a href="/index.php?do=login" class="btn btn-primary">Giriş Sayfasına Dön</a>
                [/error-login]
                
                [error-reg]
                <a href="/index.php?do=register" class="btn btn-primary">Kayıt Sayfasına Dön</a>
                [/error-reg]
                
                [success-action]
                <a href="{success-link}" class="btn btn-success">Devam Et</a>
                [/success-action]
                
                [redirect-timer]
                <div class="redirect-timer">
                    <span>{timer} saniye sonra otomatik olarak yönlendirileceksiniz...</span>
                    <div class="progress-bar">
                        <div class="progress" style="width: {percent}%"></div>
                    </div>
                </div>
                [/redirect-timer]
                
                <a href="javascript:history.go(-1);" class="btn btn-secondary">Geri Dön</a>
                <a href="/" class="btn btn-link">Ana Sayfa</a>
            </div>
        </div>
    </div>
</div>

CSS Örnekleri

/* Temel mesaj stilleri */
.message-container {
    max-width: 700px;
    margin: 50px auto;
    padding: 20px;
}

.message-wrapper {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}

/* Mesaj türlerine göre renkler */
.message-wrapper.error {
    border-left: 4px solid #e74c3c;
}

.message-wrapper.success {
    border-left: 4px solid #2ecc71;
}

.message-wrapper.info {
    border-left: 4px solid #3498db;
}

.message-wrapper.warning {
    border-left: 4px solid #f39c12;
}

/* Mesaj içeriği */
.message-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    font-size: 40px;
    padding: 25px 0;
}

.error .message-icon {
    color: #e74c3c;
}

.success .message-icon {
    color: #2ecc71;
}

.info .message-icon {
    color: #3498db;
}

.warning .message-icon {
    color: #f39c12;
}

.message-content {
    flex: 1;
    padding: 25px;
}

.message-title {
    font-size: 24px;
    margin: 0 0 10px 0;
    padding: 0;
}

.message-text {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Butonlar */
.message-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: #3498db;
    color: #fff;
}

.btn-primary:hover {
    background-color: #2980b9;
}

.btn-success {
    background-color: #2ecc71;
    color: #fff;
}

.btn-success:hover {
    background-color: #27ae60;
}

.btn-secondary {
    background-color: #95a5a6;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #7f8c8d;
}

.btn-link {
    background-color: transparent;
    color: #3498db;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Yönlendirme sayacı */
.redirect-timer {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.progress-bar {
    height: 5px;
    background-color: #ecf0f1;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.progress {
    height: 100%;
    background-color: #3498db;
    transition: width 1s linear;
}

/* Mobil uyumluluk */
@media (max-width: 576px) {
    .message-wrapper {
        flex-direction: column;
    }
    
    .message-icon {
        width: 100%;
        padding: 20px 0 0 0;
    }
    
    .btn {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}

Şablon Mesaj Örnekleri

Hata Mesajı

Giriş bilgileri yanlış. Lütfen kullanıcı adınızı ve şifrenizi kontrol edip tekrar deneyin.

Giriş Sayfasına Dön Geri Dön

İşlem Başarılı

Yeni hesabınız başarıyla oluşturuldu. Giriş yapabilmeniz için aktivasyon bağlantısı e-posta adresinize gönderildi.

Ana Sayfaya Dön

Bilgilendirme

Şifre sıfırlama bağlantısı e-posta adresinize gönderildi. Lütfen e-postanızı kontrol edin.

Giriş Sayfasına Dön

Uyarı

Bu sayfaya erişmek için yeterli izniniz yok. Lütfen giriş yapın veya gerekli izinleri talep edin.

Giriş Yap Geri Dön

Bilgi Mesajları Hakkında

Bilgi ve hata mesajları, kullanıcılara sistemdeki olaylar veya eylemler hakkında bilgi vermek için kullanılır. Bu mesajlar, kullanıcı deneyiminin önemli bir parçasıdır ve aşağıdaki ilkeleri göz önünde bulundurarak tasarlanmalıdır:

Net ve Açık Olun: Mesajlar kısa ve anlaşılır olmalıdır.
Çözüm Sunun: Bir hata durumunda, kullanıcının ne yapabileceğini belirtin.
Teknik Jargondan Kaçının: Mesajlar teknik terimleri değil, günlük dili kullanmalıdır.
Görsel İpuçları Kullanın: Simgeler ve renkler mesajın türünü hızlıca tanımlamaya yardımcı olur.

Site Bilgileri

Şu anda aktif oturum: elegance07

Tarih/Saat (UTC): 2025-05-22 17:31:05