var

  MainForm: TclForm;

  IntroPnl, SelectionPnl: TclProPanel;

  MainScroll: TclVertScrollBox;

  LblWelcome, LblMainTitle: TclProLabel;

  BtnStart: TclProButton;

  Row1, Row2, Row3, Row4: TclProPanel;

  Btn1, Btn2, Btn3, Btn4, Btn5, Btn6, Btn7, Btn8, Btn9, Btn10, Btn11, Btn12, Btn13, Btn14: TclProButton;

const

  C_Bg = '#F0F4F8'; 

  C_Accent = '#2563EB'; 

  C_Text = '#1E293B'; 

  // Arka plan resim URL'si. Kendi resim URL'nizle değiştirin.

  C_BackGroundImg = 'https://clomosy.com/demos/bg.png'; 

void OnStartClick;

{

  IntroPnl.Visible = False;

  SelectionPnl.Visible = True;

}

void OnClickEleme; { ShowMessage('Eleme Yöntemi kullanılır. Bu yöntem tanecik boyutları birbirinden farklı olan katı - katı karışımları, uygun gözenekli bir araç yardımıyla ayırmak için kullanılır.'); }

void OnClickSuzme; { ShowMessage('Süzme Yöntemi kullanılır. Bu yöntem sıvı içinde çözünmeyen katı tanecikleri, bir süzgeç veya filtre yardımıyla sıvıdan ayırmak için kullanılır.'); }

void OnClickMiknatis; { ShowMessage('Mıknatısla Ayırma Yöntemi kullanılır. Bu yöntem manyetik özellik gösteren maddeleri karışımın içinden çekmek için kullanılır.'); }

void OnClickBuharlastirma; { ShowMessage('Buharlaştırma Yöntemi kullanılır. Bu yöntem katı - sıvı homojen karışımlarda, sıvıyı buharlaştırarak kabın içinde sadece katı maddeyi bırakmak için kullanılır.'); }

void OnClickYogunluk; { ShowMessage('Yoğunluk Farkı ile Ayırma Yöntemi kullanılır. Bu yöntem birbiri içinde çözünmeyen ve yoğunlukları farklı olan maddeleri birbirinden ayırmak için kullanılır.'); }

void OnClickDamitma; { ShowMessage('Damıtma Yöntemi kullanılır. Bu yöntem kaynama noktaları birbirinden farklı olan sıvı - sıvı karışımları, önce buharlaştırıp sonra başka bir yerde yoğuşturarak ayırmak için kullanılır.'); }

void SetupUI;

{

  MainForm = TclForm.Create(Self);

 

  // MainForm.SetFormColor(C_Bg, C_Bg, clGCross); 

  MainForm.SetFormBGImage(C_BackGroundImg);

  IntroPnl = MainForm.AddNewProPanel(MainForm, 'IntroPnl');

  IntroPnl.Align = alClient;

  // Arka plan resmi görünmesi için panel şeffaf yapıldı

  IntroPnl.SetclProSettings(IntroPnl.clProSettings);

  LblWelcome = MainForm.AddNewProLabel(IntroPnl, 'LblWelcome', 'KARIŞIMLARIN AYRILMASI LABORATUVARINA HOŞ GELDİNİZ');

  LblWelcome.Align = alTop; LblWelcome.Height = 150; LblWelcome.Margins.Top = 100;

  LblWelcome.clProSettings.FontColor = clAlphaColor.clHexToColor(C_Text); LblWelcome.clProSettings.FontSize = 22;

  LblWelcome.clProSettings.FontHorzAlign = palCenter; LblWelcome.clProSettings.TextSettings.Font.Style = [fsBold];

  LblWelcome.SetclProSettings(LblWelcome.clProSettings);

  BtnStart = MainForm.AddNewProButton(IntroPnl, 'BtnStart', 'HADİ BAŞLAYALIM');

  BtnStart.Align = alBottom; BtnStart.Height = 55; BtnStart.Width = 200; BtnStart.Margins.Bottom = 150; BtnStart.Margins.Left = 80; BtnStart.Margins.Right = 80;

  BtnStart.clProSettings.BackgroundColor = clAlphaColor.clHexToColor(C_Accent);

  BtnStart.clProSettings.FontColor = clAlphaColor.clWhite; BtnStart.clProSettings.FontSize = 16;

  BtnStart.clProSettings.RoundHeight = 15; BtnStart.clProSettings.RoundWidth = 15;

  BtnStart.SetclProSettings(BtnStart.clProSettings);

  MainForm.AddNewEvent(BtnStart, tbeOnClick, 'OnStartClick');

  SelectionPnl = MainForm.AddNewProPanel(MainForm, 'SelectionPnl');

  SelectionPnl.Align = alClient; SelectionPnl.Visible = False;

  // Arka plan resmi görünmesi için panel şeffaf yapıldı

  SelectionPnl.SetclProSettings(SelectionPnl.clProSettings);

  MainScroll = MainForm.AddNewVertScrollBox(SelectionPnl, 'MainScroll');

  MainScroll.Align = alClient;

  LblMainTitle = MainForm.AddNewProLabel(MainScroll, 'LblMainTitle', 'KARIŞIMLAR');

  LblMainTitle.Align = alTop; LblMainTitle.Height = 60; LblMainTitle.clProSettings.FontSize = 18; LblMainTitle.clProSettings.FontColor = clAlphaColor.clHexToColor(C_Text);

  LblMainTitle.clProSettings.FontHorzAlign = palCenter; LblMainTitle.clProSettings.TextSettings.Font.Style = [fsBold];

  LblMainTitle.SetclProSettings(LblMainTitle.clProSettings);

 

  Row1 = MainForm.AddNewProPanel(MainScroll, 'Row1'); Row1.Align = alTop; Row1.Height = 120;

 Row1.SetclProSettings(Row1.clProSettings);

  

  Row2 = MainForm.AddNewProPanel(MainScroll, 'Row2'); Row2.Align = alTop; Row2.Height = 120;

   Row2.SetclProSettings(Row2.clProSettings);

  

  Row3 = MainForm.AddNewProPanel(MainScroll, 'Row3'); Row3.Align = alTop; Row3.Height = 120;

  Row3.SetclProSettings(Row3.clProSettings);

  

  Row4 = MainForm.AddNewProPanel(MainScroll, 'Row4'); Row4.Align = alTop; Row4.Height = 120;

   Row4.SetclProSettings(Row4.clProSettings);

  Btn1 = MainForm.AddNewProButton(Row1, 'Btn1', 'Nohut-Buğday');

  Btn1.Align = alLeft; Btn1.Width = MainForm.clWidth / 4.4; Btn1.Margins.Left = 5;

  Btn1.clProSettings.FontSize = 7; Btn1.clProSettings.FontColor = clAlphaColor.clBlack;

  Btn1.clProSettings.FontHorzAlign = palCenter;

  Btn1.clProSettings.FontVertAlign = palTrailing; 

  Btn1.clProSettings.PictureSource = '/assets/45.png';

  MainForm.AddNewEvent(Btn1, tbeOnClick, 'OnClickEleme'); Btn1.SetclProSettings(Btn1.clProSettings);

  Btn2 = MainForm.AddNewProButton(Row1, 'Btn2', 'Kepek-Un');

  Btn2.Align = alLeft; Btn2.Width = MainForm.clWidth / 4.4; Btn2.Margins.Left = 5;

  Btn2.clProSettings.FontSize = 7; Btn2.clProSettings.FontHorzAlign = palCenter; Btn2.clProSettings.FontVertAlign = palTrailing;

  Btn2.clProSettings.PictureSource = '/assets/46.png'; MainForm.AddNewEvent(Btn2, tbeOnClick, 'OnClickEleme'); Btn2.SetclProSettings(Btn2.clProSettings);

  Btn3 = MainForm.AddNewProButton(Row1, 'Btn3', 'Taş-Saman');

  Btn3.Align = alLeft; Btn3.Width = MainForm.clWidth / 4.4; Btn3.Margins.Left = 5;

  Btn3.clProSettings.FontSize = 7; Btn3.clProSettings.FontHorzAlign = palCenter; Btn3.clProSettings.FontVertAlign = palTrailing;

  Btn3.clProSettings.PictureSource = '/assets/47.png'; MainForm.AddNewEvent(Btn3, tbeOnClick, 'OnClickEleme'); Btn3.SetclProSettings(Btn3.clProSettings);

  Btn4 = MainForm.AddNewProButton(Row1, 'Btn4', 'Makarnanın süzülmesi');

  Btn4.Align = alLeft; Btn4.Width = MainForm.clWidth / 4.4; Btn4.Margins.Left = 5;

  Btn4.clProSettings.FontSize = 7; Btn4.clProSettings.FontHorzAlign = palCenter; Btn4.clProSettings.FontVertAlign = palTrailing;

  Btn4.clProSettings.PictureSource = '/assets/43.png'; MainForm.AddNewEvent(Btn4, tbeOnClick, 'OnClickSuzme'); Btn4.SetclProSettings(Btn4.clProSettings);

  // Row 2

  Btn5 = MainForm.AddNewProButton(Row2, 'Btn5', 'Kum-Su');

  Btn5.Align = alLeft; Btn5.Width = MainForm.clWidth / 4.4; Btn5.Margins.Left = 5;

  Btn5.clProSettings.FontSize = 7; Btn5.clProSettings.FontHorzAlign = palCenter; Btn5.clProSettings.FontVertAlign = palTrailing;

  Btn5.clProSettings.PictureSource = '/assets/44.png'; MainForm.AddNewEvent(Btn5, tbeOnClick, 'OnClickSuzme'); Btn5.SetclProSettings(Btn5.clProSettings);

  Btn6 = MainForm.AddNewProButton(Row2, 'Btn6', 'Demir-Kum');

  Btn6.Align = alLeft; Btn6.Width = MainForm.clWidth / 4.4; Btn6.Margins.Left = 5;

  Btn6.clProSettings.FontSize = 7; Btn6.clProSettings.FontHorzAlign = palCenter; Btn6.clProSettings.FontVertAlign = palTrailing;

  Btn6.clProSettings.PictureSource = '/assets/40.png'; MainForm.AddNewEvent(Btn6, tbeOnClick, 'OnClickMiknatis'); Btn6.SetclProSettings(Btn6.clProSettings);

  Btn7 = MainForm.AddNewProButton(Row2, 'Btn7', 'Nikel-Taş');

  Btn7.Align = alLeft; Btn7.Width = MainForm.clWidth / 4.4; Btn7.Margins.Left = 5;

  Btn7.clProSettings.FontSize = 7; Btn7.clProSettings.FontHorzAlign = palCenter; Btn7.clProSettings.FontVertAlign = palTrailing;

  Btn7.clProSettings.PictureSource = '/assets/41.png'; MainForm.AddNewEvent(Btn7, tbeOnClick, 'OnClickMiknatis'); Btn7.SetclProSettings(Btn7.clProSettings);

  Btn8 = MainForm.AddNewProButton(Row2, 'Btn8', 'Kobalt-Un');

  Btn8.Align = alLeft; Btn8.Width = MainForm.clWidth / 4.4; Btn8.Margins.Left = 5;

  Btn8.clProSettings.FontSize = 7; Btn8.clProSettings.FontHorzAlign = palCenter; Btn8.clProSettings.FontVertAlign = palTrailing;

  Btn8.clProSettings.PictureSource = '/assets/42.png'; MainForm.AddNewEvent(Btn8, tbeOnClick, 'OnClickMiknatis'); Btn8.SetclProSettings(Btn8.clProSettings);

  // Row 3

  Btn9 = MainForm.AddNewProButton(Row3, 'Btn9', 'Şeker-Su');

  Btn9.Align = alLeft; Btn9.Width = MainForm.clWidth / 4.4; Btn9.Margins.Left = 5;

  Btn9.clProSettings.FontSize = 7; Btn9.clProSettings.FontHorzAlign = palCenter; Btn9.clProSettings.FontVertAlign = palTrailing;

  Btn9.clProSettings.PictureSource = '/assets/38.png'; MainForm.AddNewEvent(Btn9, tbeOnClick, 'OnClickBuharlastirma'); Btn9.SetclProSettings(Btn9.clProSettings);

  Btn10 = MainForm.AddNewProButton(Row3, 'Btn10', 'Tuz-Su');

  Btn10.Align = alLeft; Btn10.Width = MainForm.clWidth / 4.4; Btn10.Margins.Left = 5;

  Btn10.clProSettings.FontSize = 7; Btn10.clProSettings.FontHorzAlign = palCenter; Btn10.clProSettings.FontVertAlign = palTrailing;

  Btn10.clProSettings.PictureSource = '/assets/39.png'; MainForm.AddNewEvent(Btn10, tbeOnClick, 'OnClickBuharlastirma'); Btn10.SetclProSettings(Btn10.clProSettings);

  Btn11 = MainForm.AddNewProButton(Row3, 'Btn11', 'Kum-Talaş');

  Btn11.Align = alLeft; Btn11.Width = MainForm.clWidth / 4.4; Btn11.Margins.Left = 5;

  Btn11.clProSettings.FontSize = 7; Btn11.clProSettings.FontHorzAlign = palCenter; Btn11.clProSettings.FontVertAlign = palTrailing;

  Btn11.clProSettings.PictureSource = '/assets/35.png'; MainForm.AddNewEvent(Btn11, tbeOnClick, 'OnClickYogunluk'); Btn11.SetclProSettings(Btn11.clProSettings);

  // Row 4

  Btn12 = MainForm.AddNewProButton(Row4, 'Btn12', 'Zeytin Yağı-Su');

  Btn12.Align = alLeft; Btn12.Width = MainForm.clWidth / 4.4; Btn12.Margins.Left = 5;

  Btn12.clProSettings.FontSize = 7; Btn12.clProSettings.FontHorzAlign = palCenter; Btn12.clProSettings.FontVertAlign = palTrailing;

  Btn12.clProSettings.PictureSource = '/assets/34.png'; MainForm.AddNewEvent(Btn12, tbeOnClick, 'OnClickYogunluk'); Btn12.SetclProSettings(Btn12.clProSettings);

  Btn13 = MainForm.AddNewProButton(Row4, 'Btn13', 'Kolonya');

  Btn13.Align = alLeft; Btn13.Width = MainForm.clWidth / 4.4; Btn13.Margins.Left = 5;

  Btn13.clProSettings.FontSize = 7; Btn13.clProSettings.FontHorzAlign = palCenter; Btn13.clProSettings.FontVertAlign = palTrailing;

  Btn13.clProSettings.PictureSource = '/assets/36.png'; MainForm.AddNewEvent(Btn13, tbeOnClick, 'OnClickDamitma'); Btn13.SetclProSettings(Btn13.clProSettings);

  Btn14 = MainForm.AddNewProButton(Row4, 'Btn14', 'Petrol');

  Btn14.Align = alLeft; Btn14.Width = MainForm.clWidth / 4.4; Btn14.Margins.Left = 5;

  Btn14.clProSettings.FontSize = 7; Btn14.clProSettings.FontHorzAlign = palCenter; Btn14.clProSettings.FontVertAlign = palTrailing;

  Btn14.clProSettings.PictureSource = '/assets/37.png'; MainForm.AddNewEvent(Btn14, tbeOnClick, 'OnClickDamitma'); Btn14.SetclProSettings(Btn14.clProSettings);

  MainForm.Run;

}

{

  SetupUI;

}

arka plana görsel ekleyememe sebebin MainForm.SetFormColor yorum satırına alıp 
MainForm.SetFormBGImage eklemen gerekir. Görselleri kendi uzantılarınla eklersin 

Görselimin linki: /assets/50.png