Ana Sayfa ve Login Ekranı Tasarım Güncelleme

Uygulamadaki bazı tasarım kısımları yönetim paneli üzerinden güncellenebilmektedir. Bunun için yönetim panelindeki ayarlar sekmesi altındaki "Ana sayfa ayarları" ile "Giriş Sayfası Ayarları" Ekranları kullanılmaktadır. Aşağıda bu ekranların detayları yer almaktadır.

1. Ana Sayfa Ayarları

Ana Sayfa Ayarları sekmesine girildiğinde yukarıdaki ekran bizi karşılamaktadır. Ekrandaki özellikler numara ile belirtilmiş alanları güncellemektedir. Detaylar şu şekildedir:

• Sağ üst köşede 3 adet ikon yer almaktadır. ilk ikona tıklandığında yapılan değişikliğin nasıl yansıdığı tam ekranda gözükmektedir.İkinci ikon yapılan tüm değişiklikleri geri alıp keycloak'taki varsayılan ayara döndürmektedir.Üçüncü ikon yapılan değişiklikleri kayıt etmeyi sağlamaktadır.
• Özelliklerde değişiklik yaptıkça ekranada eş zamanlı yansımaktadır.
• Üst çubuk başlığı altındaki özellikler görseldeki 1 ile numaralandırılmış alanı güncellemektedir. Üst çubuk başlık kısmı gözüken yazıyı değiştirirken, Üst çubuğa logo ekle butonu ile logo güncellenebilmektedir.
• Favicon ve Başlık altındaki Belge Başlığı kısmı tarayıcı sekmesinde uygulama için ne yazacağını ifade etmektedir.Favicon Ekle kısmı ise yine tarayıcı sekmesinde uygulama için gözükecek ikonun seçildiği kısımdır.
• Başlık görseli altındaki Başlık görseli metni kısmı görseldeki 2 numaralı yazıyı güncellemektedir.
• Başlık görseline resim ekle butonu ile görselin 3 numaralı kısmındaki logo güncellenebilmektedir.
• Başlık görseli altındaki renk ayarlamaları kısmıda şu anda mavi gözüken dikdörtgen kısmının tamamının arkaplan rengini güncellemektedir. Eğer Rengi özelleştir seçilirse tek bir renk seçmek yerine linear-gradient css renk kodu yazılabilmektedir.

2. Uygulama Griiş Sayfası Ayarları

Uygulamaya giriş yaparken kullanıcı adı ve şifrenin girildiği ekranın tasarımı yönetim paneli -> ayarlar -> Giriş Sayfası Ayarları ekranından sağlanmaktadır. Bu ekrandan standart ve gelişmiş tema tasarımı sağlanmaktadır. Burada güncelleme yaptıktan sonra keycloak'tan da gelimiş veya standart tema seçimi kullanılmak istenen temaya uygun yapılmış olmalıdır. Özelliklerde değişiklik yaptıktan sonucu görmek için sağ üst köşedeki göz ikonuna tıklandığında yeni tasarım yeni sayfada açılmaktadır. Standart ve Gelişmiş tasarımın detayları şu şekildedir:

1. Standart Giriş Ekranı Tasarımı

• Standart ekranda tüm login ekranı tek bir sayfa kabul edilir. Eklenen arkaplan resmi veya seçilen renk tüm ekranı kaplamaktadır.
• Ekranın sol tarafındaki özellikler ile ekranın arka planına dair düzenlemeler yapılabilmektedir.
• Eğer giriş ekranının arkaplanında resim kullanılmak isteniyorsa Arka plan resmini kullan seçimi aktif olmalıdır.Aktif olduğunda gözüken özellikler ile resim seçilerek çeşitli konumlarda ayarlanabilir.
• Eğer giriş ekranının arkaplanına sadece renk eklenmek isteniyorsa Arka plan resmini kullan seçimi pasife alınmalıdır. Bu durumda renk seçim opsiyonları ile istenilen arkaplan rengi ayarlanabilir.
• Ekranın sağ tarafındaki özellikler ise giriş bilgilerinin girildiği kısımları özelleştirmektedir.
• Başlık kısmı kullanıcı adı/şifre kısmının üzerine başlık eklemeyi sağlar.
• Başlıktan alt bilgi göster özelliğine kadar olan tüm özellikler kullanıcı adı/şifre bilgilerinin girildiği alanlar ile giriş butonunun özelliklerini güncellemektedir.
• Alt bilgi kısmı ise ekranın en altına bilgi yazısı eklemeyi sağlamaktadır.

2. Gelişmiş Giriş Ekranı Tasarımı

• Gelişmiş tasarımda ekran ikiye ayrılmaktadır. Yukarıdaki görselin sol kısmındaki özellikler giriş ekranının sol kısmını, ekranın sağ kısmındaki özellikler ise ekranın sağ kısmını güncellemektedir.
• Sol taraftaki özellikler ile ekranın sol kısmının arka plan rengi güncellenip ekranın çeşitli noktalarına logolar eklenebilmektedir.
• Sağ taraftaki özellikler ise standart tasarımda olduğu gibi kullanıcı adı/şifre bilgilerinin girildiği kısmın tasarımını değiştirmeyi sağlamaktadır.