Done with new ui

My project/Assets/AppUI/Backend.meta

+fileFormatVersion: 2
+guid: 9f5e4a3bb94ec3648b180e433c73baf4
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

My project/Assets/AppUI/Backend/LoginManager.cs

+using UnityEngine;
+using UnityEngine.UIElements;
+
+public class LoginManager : MonoBehaviour
+{
+    [SerializeField] UIDocument UIDocument;
+
+    TextField email;
+    TextField password;
+
+    Button loginButton;
+
+    void Start()
+    {
+        email = UIDocument.rootVisualElement.Q<TextField>("email");
+        password = UIDocument.rootVisualElement.Q<TextField>("password");
+        loginButton = UIDocument.rootVisualElement.Q<Button>("loginButton");
+
+        loginButton.clicked += OnLoginButtonClick;
+    }
+
+    private void OnLoginButtonClick()
+    {
+        string emailValue = email.value;
+        string passwordValue = password.value;
+
+        Debug.Log($"Email: {emailValue}, Password: {passwordValue}");
+    }
+
+
+    void LiveBar()
+    {
+        ScrollView liveBar = UIDocument.rootVisualElement.Q<VisualElement>("liveBar").Q<ScrollView>();
+
+        Label text = new Label("<color=#FED700>Esraa</color> فازت");
+        liveBar.Add(text);
+
+
+        CustomLeaderboardSlot slot = new CustomLeaderboardSlot();
+        slot.Index = "1";
+        slot.PlayerName = "Abdo";
+        slot.Rank = "اسطوري";
+        slot.XP = "1000";
+        slot.IsOwner = true;
+        slot.SetPlayerImage("https://www.pngall.com/wp-content/uploads/5/Profile-PNG-High-Quality-Image.png");
+
+
+        liveBar.Add(slot);
+
+
+        CustomSwitch switchh = UIDocument.rootVisualElement.Q<ScrollView>("SettingList").Q<CustomSwitch>("SoundSwitch");
+        switchh.IsOn = true;
+
+        
+    }
+
+}

My project/Assets/AppUI/Backend/LoginManager.cs.meta

+fileFormatVersion: 2
+guid: 8cf28bfc4d270e64287dfa1d4fa3420f
\ No newline at end of file

My project/Assets/AppUI/Image/—Pngtree—vector edit profile icon_4102545.png.meta

+fileFormatVersion: 2
+guid: f5912ebb886d62146b215c6384c7f4ca
+TextureImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 13
+  mipmaps:
+    mipMapMode: 0
+    enableMipMap: 0
+    sRGBTexture: 1
+    linearTexture: 0
+    fadeOut: 0
+    borderMipMap: 0
+    mipMapsPreserveCoverage: 0
+    alphaTestReferenceValue: 0.5
+    mipMapFadeDistanceStart: 1
+    mipMapFadeDistanceEnd: 3
+  bumpmap:
+    convertToNormalMap: 0
+    externalNormalMap: 0
+    heightScale: 0.25
+    normalMapFilter: 0
+    flipGreenChannel: 0
+  isReadable: 0
+  streamingMipmaps: 0
+  streamingMipmapsPriority: 0
+  vTOnly: 0
+  ignoreMipmapLimit: 0
+  grayScaleToAlpha: 0
+  generateCubemap: 6
+  cubemapConvolution: 0
+  seamlessCubemap: 0
+  textureFormat: 1
+  maxTextureSize: 2048
+  textureSettings:
+    serializedVersion: 2
+    filterMode: 1
+    aniso: 1
+    mipBias: 0
+    wrapU: 1
+    wrapV: 1
+    wrapW: 0
+  nPOTScale: 0
+  lightmap: 0
+  compressionQuality: 50
+  spriteMode: 1
+  spriteExtrude: 1
+  spriteMeshType: 1
+  alignment: 0
+  spritePivot: {x: 0.5, y: 0.5}
+  spritePixelsToUnits: 100
+  spriteBorder: {x: 0, y: 0, z: 0, w: 0}
+  spriteGenerateFallbackPhysicsShape: 1
+  alphaUsage: 1
+  alphaIsTransparency: 1
+  spriteTessellationDetail: -1
+  textureType: 8
+  textureShape: 1
+  singleChannelComponent: 0
+  flipbookRows: 1
+  flipbookColumns: 1
+  maxTextureSizeSet: 0
+  compressionQualitySet: 0
+  textureFormatSet: 0
+  ignorePngGamma: 0
+  applyGammaDecoding: 0
+  swizzle: 50462976
+  cookieLightType: 0
+  platformSettings:
+  - serializedVersion: 4
+    buildTarget: DefaultTexturePlatform
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: Standalone
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: Android
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: WebGL
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: WindowsStoreApps
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  spriteSheet:
+    serializedVersion: 2
+    sprites: []
+    outline: []
+    customData: 
+    physicsShape: []
+    bones: []
+    spriteID: 5e97eb03825dee720800000000000000
+    internalID: 0
+    vertices: []
+    indices: 
+    edges: []
+    weights: []
+    secondaryTextures: []
+    spriteCustomMetadata:
+      entries: []
+    nameFileIdTable: {}
+  mipmapLimitGroupName: 
+  pSDRemoveMatte: 0
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

My project/Assets/AppUI/Scripts/CustomElement/CustomLeaderboardSlot.cs

@@ -105,6 +105,7 @@ public partial class CustomLeaderboardSlot : VisualElement
             _playerNameLabel.style.color = new Color(0.2431373f, 0.1764706f, 0.8078431f);
             _indexLabel.style.color = new Color(0.2431373f, 0.1764706f, 0.8078431f);
             _playerImage.style.backgroundColor = new Color(0.2431373f, 0.1764706f, 0.8078431f);
+            _padding.style.backgroundColor = new Color(0.2431373f, 0.1764706f, 0.8078431f,.15f);
 
             _padding.style.borderLeftWidth = 4;
             _padding.style.borderRightWidth = 4;
@@ -116,6 +117,7 @@ public partial class CustomLeaderboardSlot : VisualElement
             _playerNameLabel.style.color = new Color(0.2588235f, 0.2588235f, 0.2588235f);
             _indexLabel.style.color = new Color(0.6196079f, 0.6196079f, 0.6196079f);
             _playerImage.style.backgroundColor = new Color(0.8196079f, 0.8196079f, 0.8196079f);
+            _padding.style.backgroundColor = new Color(0, 0, 0, .1f);
 
             _padding.style.borderLeftWidth = 0;
             _padding.style.borderRightWidth = 0;

My project/Assets/AppUI/Scripts/CustomElement/CustomNotificationsSlot.cs

+using UnityEngine;
+using UnityEngine.UIElements;
+
+[UxmlElement]
+public partial class NotificationsSlot : VisualElement
+{
+    Label _notificationNameLabel;
+    Label _notificationTimeLabel;
+    Image _notificationImage;
+    VisualElement _notificationImageBackground;
+    VisualElement _root;
+
+    Color _imageColor;
+
+    bool _isSeen;
+
+
+    [UxmlAttribute]
+    public Sprite ImageSprite   
+    {
+        get { return _notificationImage.sprite; }
+        set { _notificationImage.sprite = value; }
+    }
+
+    [UxmlAttribute]
+    public Color ImageColor
+    {
+        get { return _imageColor; }
+        set
+        {
+            _imageColor = value;
+            UpdateVisualState();
+        }
+    }
+
+    [UxmlAttribute]
+    public string NotificationsName
+    {
+        get { return _notificationNameLabel.text; }
+        set { _notificationNameLabel.text = value; }
+    }
+
+    [UxmlAttribute]
+    public string NotificationsTime
+    {
+        get { return _notificationTimeLabel.text; }
+        set { _notificationTimeLabel.text = value; }
+    }
+
+    [UxmlAttribute]
+    public bool IsSeen
+    {
+        get { return _isSeen; }
+        set
+        {
+            _isSeen = value;
+            UpdateVisualState();
+        }
+    }
+
+    public NotificationsSlot()
+    {
+        var template = Resources.Load<VisualTreeAsset>("CustomNotificationsSlot");
+        template.CloneTree(this);
+
+        _root = this.Q<VisualElement>("NotificationsSlot");
+        _notificationNameLabel = this.Q<Label>("NotificationsName");
+        _notificationTimeLabel = this.Q<Label>("NotificationsTime");
+        _notificationImageBackground = this.Q<VisualElement>("NotificationsImageBackground");
+        _notificationImage = this.Q<Image>("NotificationsImage");
+
+        ImageColor = new Color(0.2431373f, 0.1764706f, 0.8078431f, 1f);
+    }
+
+    private void UpdateVisualState()
+    {
+        if (!_isSeen)
+        {
+            _root.style.borderTopWidth = 3;
+            _root.style.borderBottomWidth = 3;
+            _root.style.borderLeftWidth = 3;
+            _root.style.borderRightWidth = 3;
+
+            Color borderColor = new Color(0.2431373f, 0.1764706f, 0.8078431f, 0.5019608f);
+            _root.style.borderTopColor = borderColor;
+            _root.style.borderBottomColor = borderColor;
+            _root.style.borderLeftColor = borderColor;
+            _root.style.borderRightColor = borderColor;
+
+            _root.style.backgroundColor = new Color(0.3647059f, 0.3098039f, 0.9607843f, 0.1019608f);
+            _notificationImage.tintColor = new Color(0.2431373f, 0.1764706f, 0.8078431f, 1);
+
+        }
+        else
+        {
+            _root.style.borderTopWidth = 0;
+            _root.style.borderBottomWidth = 0;
+            _root.style.borderLeftWidth = 0;
+            _root.style.borderRightWidth = 0;
+
+            _root.style.backgroundColor = new Color(0.9529412f, 0.9529412f, 0.9529412f);
+
+            _notificationImage.tintColor = _imageColor;
+        }
+
+        Color tmpColor = _notificationImage.tintColor;
+        tmpColor.a = 0.1490196f;
+        _notificationImageBackground.style.backgroundColor = tmpColor;
+    }
+}
\ No newline at end of file

My project/Assets/AppUI/Scripts/CustomElement/CustomNotificationsSlot.cs.meta

+fileFormatVersion: 2
+guid: fb7c98b859ccd434bb151ca4501ac3b4
\ No newline at end of file

My project/Assets/AppUI/Scripts/CustomElement/CustomSwitch.cs

+using UnityEngine;
+using UnityEngine.UIElements;
+
+[UxmlElement]
+public partial class CustomSwitch : VisualElement
+{
+    bool _isOn;
+    VisualElement _switchBackground;
+    VisualElement _switchPoint;
+
+    [UxmlAttribute]
+    public bool IsOn
+    {
+        get { return _isOn; }
+        set { HandleSwitchStyle(value); }
+    }
+
+    public CustomSwitch()
+    {
+        var switchElement = Resources.Load<VisualTreeAsset>("CustomSwitch");
+        switchElement.CloneTree(this);
+
+        _switchBackground = this.Q<VisualElement>("Switch");
+        _switchPoint = this.Q<VisualElement>("Point");
+
+        _switchBackground.RegisterCallback<ClickEvent>((v) =>
+        {
+            IsOn = !IsOn;
+        });
+    }
+
+    void HandleSwitchStyle(bool value)
+    {
+        _isOn = value;
+
+        if (IsOn)
+        {
+            _switchBackground.AddToClassList("Switch-On");
+            _switchPoint.AddToClassList("Switch-Dot-On");
+        }
+        else
+        {
+            _switchBackground.RemoveFromClassList("Switch-On");
+            _switchPoint.RemoveFromClassList("Switch-Dot-On");
+        }
+    }
+}

My project/Assets/AppUI/Scripts/CustomElement/CustomSwitch.cs.meta

+fileFormatVersion: 2
+guid: df53aeba10848b444a5ebca464da87de
\ No newline at end of file

My project/Assets/AppUI/Scripts/MainmenuAnimation.cs

@@ -9,6 +9,8 @@ public class MainmenuAnimation : MonoBehaviour
 
     ToggleButtonGroup _footerToggleButtonGroup;
     VisualElement _bodyPanel;
+    VisualElement menuPanel;
+
     void Start()
     {
         _bodyPanel = mainMenu.rootVisualElement.Q<VisualElement>("Body");
@@ -17,6 +19,18 @@ public class MainmenuAnimation : MonoBehaviour
         HandleMenuPanel();
 
         HandleGamesSlots();
+
+        HandleNotifications();
+
+        HandleEditProfile();
+
+        HandleRankPanel();
+
+        HandleHowToPlayPanel();
+
+        HandleAboutPanel();
+
+        HandleSettingPanel();
     }
 
     private void HandleMenuPanel()
@@ -24,7 +38,7 @@ public class MainmenuAnimation : MonoBehaviour
         Button openMenuButton = mainMenu.rootVisualElement.Q<Button>("OpenMenuButton");
         Button closeMenuPanel = mainMenu.rootVisualElement.Q<Button>("CloseMenuButton");
 
-        VisualElement menuPanel = mainMenu.rootVisualElement.Q<VisualElement>("MenuPanel");
+        menuPanel = mainMenu.rootVisualElement.Q<VisualElement>("MenuPanel");
 
         openMenuButton.clicked += () =>
         {
@@ -74,7 +88,7 @@ public class MainmenuAnimation : MonoBehaviour
     }
     #endregion
 
-
+    #region GameSlots
     private void HandleGamesSlots()
     {
         VisualElement CustomGameSlotParent = mainMenu.rootVisualElement.Q<VisualElement>("Home");
@@ -128,4 +142,203 @@ public class MainmenuAnimation : MonoBehaviour
             SceneManager.LoadScene(customGameSlot.SceneName);
         };
     }
+    #endregion
+
+    #region Notifications
+    private void HandleNotifications()
+    {
+        VisualElement notificationsPanel = mainMenu.rootVisualElement.Q<VisualElement>("NotificationsPanel");
+
+        Button openNotificationsButton = mainMenu.rootVisualElement.Q<Button>("OpenNotificationsButton");
+        Button closeNotificationsButton = mainMenu.rootVisualElement.Q<Button>("CloseNotificationsButton");
+
+
+        openNotificationsButton.clicked += () =>
+        {
+            notificationsPanel.style.display = DisplayStyle.Flex;
+            notificationsPanel.experimental.animation.Start(0, 1, 200, (v, t) =>
+            {
+                notificationsPanel.style.opacity = t;
+            });
+        };
+
+        closeNotificationsButton.clicked += () =>
+        {
+            notificationsPanel.experimental.animation.Start(1, 0, 200, (v, t) =>
+            {
+                notificationsPanel.style.opacity = t;
+            }).OnCompleted(() =>
+            {
+                notificationsPanel.style.display = DisplayStyle.None;
+            });
+        };
+    }
+
+    #endregion
+
+    #region EditProfile
+    private void HandleEditProfile()
+    {
+        VisualElement editProfilePanel = mainMenu.rootVisualElement.Q<VisualElement>("EditProfilePanel");
+
+        Button openEditProfileButton = mainMenu.rootVisualElement.Q<Button>("OpenEditProfileButton");
+        Button closeEditProfileButton = mainMenu.rootVisualElement.Q<Button>("CloseEditProfileButton");
+
+
+        openEditProfileButton.clicked += () =>
+        {
+            editProfilePanel.style.display = DisplayStyle.Flex;
+            editProfilePanel.experimental.animation.Start(0, 1, 200, (v, t) =>
+            {
+                editProfilePanel.style.opacity = t;
+            });
+        };
+
+        closeEditProfileButton.clicked += () =>
+        {
+            editProfilePanel.experimental.animation.Start(1, 0, 200, (v, t) =>
+            {
+                editProfilePanel.style.opacity = t;
+            }).OnCompleted(() =>
+            {
+                editProfilePanel.style.display = DisplayStyle.None;
+            });
+        };
+    }
+    #endregion
+
+    #region RankPanel
+    private void HandleRankPanel()
+    {
+        VisualElement rankPanel = mainMenu.rootVisualElement.Q<VisualElement>("RankingSystemPanel");
+
+        mainMenu.rootVisualElement.Query<Button>("OpenRankPanelButton").ForEach(btn =>
+        {
+            btn.clicked += () =>
+            {
+                rankPanel.style.display = DisplayStyle.Flex;
+                rankPanel.experimental.animation.Start(0, 1, 200, (v, t) =>
+                {
+                    menuPanel.style.translate = new Translate(new Length(-100, LengthUnit.Percent), 0);
+
+                    rankPanel.style.opacity = t;
+                });
+            };
+        });
+
+        Button closeRankPanelButton = mainMenu.rootVisualElement.Q<Button>("CloseRankPanelButton");
+
+        closeRankPanelButton.clicked += () =>
+        {
+            rankPanel.experimental.animation.Start(1, 0, 200, (v, t) =>
+            {
+                rankPanel.style.opacity = t;
+            }).OnCompleted(() =>
+            {
+                rankPanel.style.display = DisplayStyle.None;
+            });
+        };
+    }
+    #endregion
+
+    #region HowToPlayPanel
+    private void HandleHowToPlayPanel()
+    {
+        VisualElement howToPlayPanel = mainMenu.rootVisualElement.Q<VisualElement>("HowToPlayPanel");
+
+        Button openHowToPlayButton = mainMenu.rootVisualElement.Q<Button>("OpenHowToPlayButton");
+        Button closeHowToPlayButton = mainMenu.rootVisualElement.Q<Button>("CloseHowToPlayButton");
+
+        openHowToPlayButton.clicked += () =>
+        {
+            menuPanel.style.translate = new Translate(new Length(-100, LengthUnit.Percent), 0);
+
+            howToPlayPanel.style.display = DisplayStyle.Flex;
+            howToPlayPanel.experimental.animation.Start(0, 1, 200, (v, t) =>
+            {
+                howToPlayPanel.style.opacity = t;
+            });
+        };
+
+
+        closeHowToPlayButton.clicked += () =>
+        {
+            howToPlayPanel.experimental.animation.Start(1, 0, 200, (v, t) =>
+            {
+                howToPlayPanel.style.opacity = t;
+            }).OnCompleted(() =>
+            {
+                howToPlayPanel.style.display = DisplayStyle.None;
+            });
+        };
+    }
+    #endregion
+
+    #region AboutPanel
+    private void HandleAboutPanel()
+    {
+        VisualElement aboutPanel = mainMenu.rootVisualElement.Q<VisualElement>("AboutPanel");
+
+        Button openAboutButton = mainMenu.rootVisualElement.Q<Button>("OpenAboutButton");
+        Button closeAboutButton = mainMenu.rootVisualElement.Q<Button>("CloseAboutButton");
+
+        openAboutButton.clicked += () =>
+        {
+            menuPanel.style.translate = new Translate(new Length(-100, LengthUnit.Percent), 0);
+
+            aboutPanel.style.display = DisplayStyle.Flex;
+            aboutPanel.experimental.animation.Start(0, 1, 200, (v, t) =>
+            {
+                aboutPanel.style.opacity = t;
+            });
+        };
+
+
+        closeAboutButton.clicked += () =>
+        {
+            aboutPanel.experimental.animation.Start(1, 0, 200, (v, t) =>
+            {
+                aboutPanel.style.opacity = t;
+            }).OnCompleted(() =>
+            {
+                aboutPanel.style.display = DisplayStyle.None;
+            });
+        };
+    }
+
+    #endregion
+
+    #region SettingPanel
+    private void HandleSettingPanel()
+    {
+        VisualElement settingPanel = mainMenu.rootVisualElement.Q<VisualElement>("SettingPanel");
+
+        Button openSettingButton = mainMenu.rootVisualElement.Q<Button>("OpenSettingButton");
+        Button closeSettingButton = mainMenu.rootVisualElement.Q<Button>("CloseSettingButton");
+
+        openSettingButton.clicked += () =>
+        {
+            menuPanel.style.translate = new Translate(new Length(-100, LengthUnit.Percent), 0);
+
+            settingPanel.style.display = DisplayStyle.Flex;
+            settingPanel.experimental.animation.Start(0, 1, 200, (v, t) =>
+            {
+                settingPanel.style.opacity = t;
+            });
+        };
+
+
+        closeSettingButton.clicked += () =>
+        {
+            settingPanel.experimental.animation.Start(1, 0, 200, (v, t) =>
+            {
+                settingPanel.style.opacity = t;
+            }).OnCompleted(() =>
+            {
+                settingPanel.style.display = DisplayStyle.None;
+            });
+        };
+    }
+
+    #endregion
 }

My project/Assets/AppUI/UIToolkit/USS/Style.uss

@@ -59,6 +59,7 @@
     border-right-color: rgba(0, 0, 0, 0.1);
     border-top-color: rgba(0, 0, 0, 0.1);
     border-bottom-color: rgba(0, 0, 0, 0.1);
+    transition-duration: 0.15s;
 }
 
 .textField:focus {
@@ -577,3 +578,110 @@
 .play-game-button:active {
     opacity: 0.8;
 }
+
+.notifications-date {
+    -unity-font-definition: url("project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&guid=566b773a07b3d064aa1f4c6ef7b6f6fa&type=3#TSHakwaty-DemiBold");
+    font-size: 40px;
+    color: rgb(158, 158, 158);
+    -unity-text-align: upper-right;
+    -unity-text-generator: advanced;
+}
+
+.update-image-profile-button {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 50px;
+    height: 50px;
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    border-bottom-left-radius: 50%;
+    background-color: rgb(62, 45, 206);
+    border-left-color: rgb(255, 255, 255);
+    border-right-color: rgb(255, 255, 255);
+    border-top-color: rgb(255, 255, 255);
+    border-bottom-color: rgb(255, 255, 255);
+    border-top-width: 5px;
+    border-right-width: 5px;
+    border-bottom-width: 5px;
+    border-left-width: 5px;
+    background-image: url("project://database/Assets/Art/export/photo_camera@3x.png?fileID=2800000&guid=c6bfe45b1cae51c4299e3f4ae1edd055&type=3#photo_camera@3x");
+    background-size: 25px 25px;
+}
+
+.update-image-profile-button:active {
+    opacity: 0.85;
+}
+
+.rank-slot {
+    flex-grow: 1;
+    background-color: rgb(243, 243, 243);
+    height: auto;
+    align-items: flex-end;
+    border-left-color: rgb(192, 192, 192);
+    border-right-color: rgb(192, 192, 192);
+    border-top-color: rgb(192, 192, 192);
+    border-bottom-color: rgb(192, 192, 192);
+    border-top-width: 2px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+    border-left-width: 2px;
+}
+
+.current-rank-slot {
+    background-color: rgb(255, 255, 255);
+    border-top-width: 4px;
+    border-right-width: 4px;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
+    border-left-color: rgb(62, 45, 206);
+    border-right-color: rgb(62, 45, 206);
+    border-top-color: rgb(62, 45, 206);
+    border-bottom-color: rgb(62, 45, 206);
+}
+
+.Switch {
+    flex-grow: 0;
+    background-color: rgb(221, 221, 221);
+    width: 118px;
+    height: auto;
+    border-top-left-radius: 32px;
+    border-top-right-radius: 32px;
+    border-bottom-right-radius: 32px;
+    border-bottom-left-radius: 32px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.Switch-On {
+    background-color: rgba(93, 79, 245, 0.96);
+}
+
+.Switch-Dot {
+    flex-grow: 0;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    border-bottom-left-radius: 50%;
+    background-color: rgb(255, 255, 255);
+    width: 40px;
+    height: 40px;
+    left: auto;
+    right: auto;
+}
+
+.Switch-Dot-On {
+    align-self: flex-end;
+    background-color: rgb(255, 255, 255);
+}

My project/Assets/AppUI/UIToolkit/UXML/Mainmenu.uxml

@@ -4,7 +4,7 @@
         <ui:VisualElement name="Contant" class="padding" style="flex-grow: 1; flex-direction: row; align-items: center;">
             <ui:Button text="" icon-image="" name="OpenMenuButton" class="button-icon"/>
             <ui:Image source="project://database/Assets/Art/SSLAB%20LOGOS/2.png?fileID=2800000&amp;guid=980570066fb5dd74abc396427104080f&amp;type=3#2" name="Logo" style="height: 100px; flex-grow: 0;"/>
-            <ui:Button name="Menu" class="button-icon" style="background-color: rgba(188, 188, 188, 0); background-image: url(&quot;project://database/Assets/Art/export/notifications_none@3x.png?fileID=2800000&amp;guid=2d77de54bfef0b544b09e0878faaa0a1&amp;type=3#notifications_none@3x&quot;);"/>
+            <ui:Button name="OpenNotificationsButton" class="button-icon" style="background-color: rgba(188, 188, 188, 0); background-image: url(&quot;project://database/Assets/Art/export/notifications_none@3x.png?fileID=2800000&amp;guid=2d77de54bfef0b544b09e0878faaa0a1&amp;type=3#notifications_none@3x&quot;);"/>
         </ui:VisualElement>
     </ui:VisualElement>
     <ui:VisualElement name="LiveBar" style="flex-grow: 0; height: 3%; background-color: rgb(14, 30, 43); flex-shrink: 0;">
@@ -82,41 +82,38 @@
                     </ui:VisualElement>
                     <ui:VisualElement name="CorrectStatement" class="game-panel" style="flex-grow: 1; background-color: rgb(243, 243, 243); height: 160px;">
                         <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: row-reverse; align-items: center; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
-                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(0, 137, 107, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center;">
+                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(0, 137, 107, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
                                 <ui:Image source="project://database/Assets/Art/export/emoji_events@3x.png?fileID=2800000&amp;guid=71ede504623fcb24eaca6ebcf545c812&amp;type=3#emoji_events@3x" tint-color="rgb(0, 137, 107)" style="flex-grow: 0; height: 60px; width: 60px;"/>
                             </ui:VisualElement>
-                            <ui:VisualElement name="Line" style="flex-grow: 0; height: 100%; background-color: rgba(255, 255, 255, 0.1); width: 5px; margin-right: 50px; margin-left: 50px;"/>
-                            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 108px; width: auto; justify-content: space-around;">
-                                <ui:Label text="Correct Statement - 8/10" name="GameName" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0;"/>
-                                <ui:Label text="منذ ساعتين" name="GameDescription" language-direction="RTL" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 26px; white-space: pre-wrap; flex-shrink: 0; translate: 0% -13px; -unity-text-align: middle-right;"/>
+                            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 94px; width: auto; justify-content: space-around;">
+                                <ui:Label text="Correct Statement - 8/10" name="GameName" class="base-text-bold" style="font-size: 26px; height: auto; flex-shrink: 0;"/>
+                                <ui:Label text="منذ ساعتين" name="GameName" class="base-text-bold" style="font-size: 23px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
                             </ui:VisualElement>
                             <ui:Label text="+120" class="base-text-bold" style="color: rgb(0, 137, 107); font-size: 35px; position: absolute; left: 50px;"/>
                         </ui:VisualElement>
                     </ui:VisualElement>
-                    <ui:VisualElement name="TrueOrFalse" class="game-panel" style="flex-grow: 1; height: 160px; background-color: rgb(243, 243, 243);">
+                    <ui:VisualElement name="MultipleChoice" class="game-panel" style="flex-grow: 1; background-color: rgb(243, 243, 243); height: 160px;">
                         <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: row-reverse; align-items: center; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
-                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(245, 3, 45, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center;">
+                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(245, 3, 45, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
                                 <ui:Image source="project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x" tint-color="rgb(245, 3, 45)" style="flex-grow: 0; height: 60px; width: 60px;"/>
                             </ui:VisualElement>
-                            <ui:VisualElement name="Line" style="flex-grow: 0; height: 100%; background-color: rgba(255, 255, 255, 0.1); width: 5px; margin-right: 50px; margin-left: 50px;"/>
-                            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 108px; width: auto; justify-content: space-around;">
-                                <ui:Label text="True or False — 4/10" name="GameName" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0;"/>
-                                <ui:Label text="منذ 5 ساعات" name="GameDescription" language-direction="RTL" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 26px; white-space: pre-wrap; flex-shrink: 0; translate: 0% -13px; -unity-text-align: middle-right;"/>
+                            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 94px; width: auto; justify-content: space-around;">
+                                <ui:Label text="Multiple Choice - 2/10" name="GameName" class="base-text-bold" style="font-size: 26px; height: auto; flex-shrink: 0;"/>
+                                <ui:Label text="منذ 5 ساعات" name="GameName" class="base-text-bold" style="font-size: 23px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
                             </ui:VisualElement>
-                            <ui:Label text="+35" class="base-text-bold" style="color: rgb(0, 137, 107); font-size: 35px; position: absolute; left: 50px;"/>
+                            <ui:Label text="+175" class="base-text-bold" style="color: rgb(0, 137, 107); font-size: 35px; position: absolute; left: 50px;"/>
                         </ui:VisualElement>
                     </ui:VisualElement>
-                    <ui:VisualElement name="MultipleChoice" class="game-panel" style="flex-grow: 1; height: 160px; background-color: rgb(243, 243, 243);">
+                    <ui:VisualElement name="CorrectStatement" class="game-panel" style="flex-grow: 1; background-color: rgb(243, 243, 243); height: 160px;">
                         <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: row-reverse; align-items: center; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
-                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(0, 137, 107, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center;">
+                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(0, 137, 107, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
                                 <ui:Image source="project://database/Assets/Art/export/emoji_events@3x.png?fileID=2800000&amp;guid=71ede504623fcb24eaca6ebcf545c812&amp;type=3#emoji_events@3x" tint-color="rgb(0, 137, 107)" style="flex-grow: 0; height: 60px; width: 60px;"/>
                             </ui:VisualElement>
-                            <ui:VisualElement name="Line" style="flex-grow: 0; height: 100%; background-color: rgba(255, 255, 255, 0.1); width: 5px; margin-right: 50px; margin-left: 50px;"/>
-                            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 108px; width: auto; justify-content: space-around;">
-                                <ui:Label text="Multiple Choice - 2/10" name="GameName" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0;"/>
-                                <ui:Label text="امس" name="GameDescription" language-direction="RTL" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 26px; white-space: pre-wrap; flex-shrink: 0; translate: 0% -13px; -unity-text-align: middle-right;"/>
+                            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 94px; width: auto; justify-content: space-around;">
+                                <ui:Label text="True or False — 4/10" name="GameName" class="base-text-bold" style="font-size: 26px; height: auto; flex-shrink: 0;"/>
+                                <ui:Label text="2026-5-5" name="GameName" class="base-text-bold" style="font-size: 23px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
                             </ui:VisualElement>
-                            <ui:Label text="+175" class="base-text-bold" style="color: rgb(0, 137, 107); font-size: 35px; position: absolute; left: 50px;"/>
+                            <ui:Label text="+50" class="base-text-bold" style="color: rgb(0, 137, 107); font-size: 35px; position: absolute; left: 50px;"/>
                         </ui:VisualElement>
                     </ui:VisualElement>
                 </ui:VisualElement>
@@ -203,8 +200,8 @@
                         </ui:VisualElement>
                         <ui:Label text="محترف" name="Title" class="base-text-bold" style="color: rgb(62, 45, 206); font-size: 35px; padding-bottom: 15px; padding-top: 15px;"/>
                         <ui:Label text="2,450 نطقة" name="Next" language-direction="RTL" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 23px;"/>
-                        <CustomProgressBar fill-color="rgb(245, 3, 45)" left-text="1,000 (محترف)" right-text="5,000 (أسطوري)" style="width: 100%; margin-top: 50px;"/>
-                        <ui:Button text="عرض جميع الرتب" language-direction="RTL" class="button-link" style="color: rgb(62, 45, 206);"/>
+                        <CustomProgressBar fill-color="rgb(254, 215, 0)" left-text="1,000 (محترف)" right-text="5,000 (أسطوري)" style="width: 100%; margin-top: 50px;"/>
+                        <ui:Button text="عرض جميع الرتب" language-direction="RTL" name="OpenRankPanelButton" class="button-link" style="color: rgb(62, 45, 206);"/>
                     </ui:VisualElement>
                     <ui:VisualElement style="flex-grow: 1; height: 189px; flex-direction: row; justify-content: space-between; margin-top: 30px;">
                         <ui:VisualElement name="Rules" style="flex-grow: 0; height: 160px; background-color: rgb(242, 242, 242); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; width: 48%; justify-content: center; align-items: center;">
@@ -226,7 +223,7 @@
                             <ui:Label text="المفضلة" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 30px; -unity-text-align: middle-center;"/>
                         </ui:VisualElement>
                     </ui:VisualElement>
-                    <ui:Button text="تعديل الملف الشخصي" language-direction="RTL" name="Login" class="base-button" style="margin-bottom: 53px;"/>
+                    <ui:Button text="تعديل الملف الشخصي" language-direction="RTL" name="OpenEditProfileButton" class="base-button" style="margin-bottom: 53px;"/>
                 </ui:VisualElement>
             </ui:VisualElement>
         </ui:ScrollView>
@@ -291,6 +288,58 @@
             <ui:Button text="ابدأ اللعب" language-direction="RTL" icon-image="project://database/Assets/Art/export/1play_arrow@3x.png?fileID=2800000&amp;guid=6d5826bc619229448bdb7e8358848b85&amp;type=3#1play_arrow@3x" name="PlayButton" class="play-game-button"/>
         </ui:VisualElement>
     </ui:VisualElement>
+    <ui:VisualElement name="NotificationsPanel" style="flex-grow: 0; width: 100%; height: 83%; background-color: rgb(255, 255, 255); position: absolute; top: 10%; left: 0; display: none; opacity: 0;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1;">
+            <ui:VisualElement name="ClosePanel" style="flex-grow: 0; flex-direction: row; align-items: center; justify-content: flex-end;">
+                <ui:Label text="الإشعارات" class="base-text-bold" style="font-size: 50px;"/>
+                <ui:Button name="CloseNotificationsButton" class="button-icon" style="background-color: rgb(238, 238, 238); border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-right-radius: 40%; border-bottom-left-radius: 40%; background-image: url(&quot;project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x&quot;); width: 100px; height: 100px; -unity-background-image-tint-color: rgb(66, 66, 66); background-size: 80% 80%; margin-left: 25px;"/>
+            </ui:VisualElement>
+            <ui:ScrollView name="NotificationsList" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="height: auto; width: 100%; flex-grow: 1; margin-top: 50px;">
+                <ui:VisualElement name="Contant" style="flex-grow: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: rgb(255, 255, 255); display: flex;">
+                    <ui:Label text="اليوم" name="Label" language-direction="RTL" class="notifications-date"/>
+                    <NotificationsSlot/>
+                    <NotificationsSlot is-seen="true" image-color="rgb(254, 215, 0)" image-sprite="project://database/Assets/Art/export/star@3x.png?fileID=21300000&amp;guid=7c3888adc21e39a40866ea6b34b5c49e&amp;type=3#star@3x" notifications-name="تم ترقية رتبتك الي  &lt;color #5D4FF5&gt; محترف" language-direction="RTL"/>
+                </ui:VisualElement>
+            </ui:ScrollView>
+        </ui:VisualElement>
+    </ui:VisualElement>
+    <ui:VisualElement name="EditProfilePanel" style="flex-grow: 0; width: 100%; height: 83%; background-color: rgb(255, 255, 255); position: absolute; top: 10%; left: 0; display: none; opacity: 0;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1;">
+            <ui:VisualElement name="ClosePanel" style="flex-grow: 0; flex-direction: row; align-items: center; justify-content: flex-end;">
+                <ui:Label text="تعديل الملف الشخصي" class="base-text-bold" style="font-size: 50px;"/>
+                <ui:Button name="CloseEditProfileButton" class="button-icon" style="background-color: rgb(238, 238, 238); border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-right-radius: 40%; border-bottom-left-radius: 40%; background-image: url(&quot;project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x&quot;); width: 100px; height: 100px; -unity-background-image-tint-color: rgb(66, 66, 66); background-size: 80% 80%; margin-left: 25px;"/>
+            </ui:VisualElement>
+            <ui:VisualElement name="GameName" style="flex-grow: 0; align-items: center; margin-top: 55px; margin-bottom: 55px;">
+                <ui:VisualElement name="ImageBackground" style="flex-grow: 0; background-image: url(&quot;project://database/Assets/AppUI/Image/%E2%80%94Pngtree%E2%80%94vector%20edit%20profile%20icon_4102545.png?fileID=2800000&amp;guid=f5912ebb886d62146b215c6384c7f4ca&amp;type=3#—Pngtree—vector edit profile icon_4102545&quot;); height: 200px; width: 200px; background-color: rgb(255, 255, 255); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center;">
+                    <ui:Button text="" name="UpdateImageProfileButton" class="update-image-profile-button" style="width: 75px; height: 75px; background-size: 40px 40px; right: -16px;"/>
+                </ui:VisualElement>
+                <ui:Label text="تغيير الصورة" name="GameName" class="base-text-bold" style="font-size: 25px; margin-top: 9px; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;); color: rgb(62, 45, 206);"/>
+            </ui:VisualElement>
+            <ui:VisualElement template="Template" name="FullName" style="margin-top: 25px; margin-bottom: 25px;">
+                <Style src="project://database/Assets/AppUI/UIToolkit/USS/Style.uss?fileID=7433441132597879392&amp;guid=f90ac983f14f5f043a3437b2c294db62&amp;type=3#Style"/>
+                <ui:Label text="الأسم بالكامل" name="TextFieldLabel" class="base-text-light" style="color: rgb(117, 117, 117); margin-bottom: 20px; font-size: 30px; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>
+                <ui:TextField label="" placeholder-text="" name="TextField" class="textField" style="height: 107px; width: 100%; flex-direction: row-reverse; color: rgb(0, 0, 0);">
+                    <ui:Image source="project://database/Assets/Art/export/mail@3x.png?fileID=2800000&amp;guid=0d76662a81af3a7408ca3c2975f08b8f&amp;type=3#mail@3x" tint-color="rgb(158, 158, 158)" style="margin-left: 25px; width: 51px; display: none;"/>
+                </ui:TextField>
+            </ui:VisualElement>
+            <ui:VisualElement template="Template" name="Username" style="margin-top: 25px; margin-bottom: 25px;">
+                <Style src="project://database/Assets/AppUI/UIToolkit/USS/Style.uss?fileID=7433441132597879392&amp;guid=f90ac983f14f5f043a3437b2c294db62&amp;type=3#Style"/>
+                <ui:Label text="اسم المستخدم" name="TextFieldLabel" class="base-text-light" style="color: rgb(117, 117, 117); margin-bottom: 20px; font-size: 30px; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>
+                <ui:TextField label="" placeholder-text="" name="TextField" class="textField" style="height: 107px; width: 100%; flex-direction: row-reverse; color: rgb(0, 0, 0);">
+                    <ui:Image source="project://database/Assets/Art/export/mail@3x.png?fileID=2800000&amp;guid=0d76662a81af3a7408ca3c2975f08b8f&amp;type=3#mail@3x" tint-color="rgb(158, 158, 158)" style="margin-left: 25px; width: 51px; display: none;"/>
+                </ui:TextField>
+            </ui:VisualElement>
+            <ui:VisualElement template="Template" name="Email" style="margin-top: 25px; margin-left: 0; margin-bottom: 25px;">
+                <Style src="project://database/Assets/AppUI/UIToolkit/USS/Style.uss?fileID=7433441132597879392&amp;guid=f90ac983f14f5f043a3437b2c294db62&amp;type=3#Style"/>
+                <ui:Label text="البريد الإلكتروني" name="TextFieldLabel" class="base-text-light" style="color: rgb(117, 117, 117); margin-bottom: 20px; font-size: 30px; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>
+                <ui:TextField label="" placeholder-text="" name="TextField" class="textField" style="height: 107px; width: 100%; flex-direction: row-reverse; color: rgb(0, 0, 0);">
+                    <ui:Image source="project://database/Assets/Art/export/mail@3x.png?fileID=2800000&amp;guid=0d76662a81af3a7408ca3c2975f08b8f&amp;type=3#mail@3x" tint-color="rgb(158, 158, 158)" style="margin-left: 25px; width: 51px; display: none;"/>
+                </ui:TextField>
+            </ui:VisualElement>
+            <ui:Button text="تغيير كلمة المرور" class="button-link"/>
+            <ui:Button text="حفظ التغييرات" language-direction="RTL" icon-image="" name="PlayButton" class="play-game-button" style="background-color: rgb(62, 45, 206); color: rgb(255, 255, 255); margin-top: 40px;"/>
+        </ui:VisualElement>
+    </ui:VisualElement>
     <ui:VisualElement name="MenuPanel" style="position: absolute; width: 100%; height: 100%; flex-direction: row; translate: -100% 0; transition-duration: 0.1s;">
         <ui:VisualElement name="Menu" style="flex-grow: 0; height: 100%; width: 75%; position: relative; background-color: rgb(255, 255, 255);">
             <ui:VisualElement name="Header" class="padding" style="flex-grow: 0; height: 425px; background-color: rgb(14, 36, 55); justify-content: space-between;">
@@ -302,7 +351,7 @@
                     </ui:VisualElement>
                 </ui:VisualElement>
             </ui:VisualElement>
-            <ui:Button text="" name="Rank" class="menu-button" style="margin-top: 40px;">
+            <ui:Button text="" name="OpenRankPanelButton" class="menu-button" style="margin-top: 40px;">
                 <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; align-items: center;">
                     <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
                         <ui:Image source="project://database/Assets/Art/export/military_tech@3x.png?fileID=2800000&amp;guid=0fbda5b44b3a23945a79b7a8a358482a&amp;type=3#military_tech@3x" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
@@ -310,7 +359,7 @@
                     <ui:Label text="رتبتي" class="base-text-bold" style="font-size: 35px; -unity-text-align: middle-right; color: rgb(117, 117, 117); -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>
                 </ui:VisualElement>
             </ui:Button>
-            <ui:Button text="" name="Setting" class="menu-button">
+            <ui:Button text="" name="OpenSettingButton" class="menu-button">
                 <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; align-items: center;">
                     <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
                         <ui:Image source="project://database/Assets/Art/export/settings@3x.png?fileID=2800000&amp;guid=22bd2adfdb425914c83dfc0ed36951e4&amp;type=3#settings@3x" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
@@ -318,7 +367,7 @@
                     <ui:Label text="الإعدادات" class="base-text-bold" style="font-size: 35px; -unity-text-align: middle-right; color: rgb(117, 117, 117); -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>
                 </ui:VisualElement>
             </ui:Button>
-            <ui:Button text="" name="HowToPlay" class="menu-button">
+            <ui:Button text="" name="OpenHowToPlayButton" class="menu-button">
                 <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; align-items: center;">
                     <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
                         <ui:Image source="project://database/Assets/Art/export/help_outline@3x.png?fileID=2800000&amp;guid=9fa2f33cc225ad24887bc600f4d20a6a&amp;type=3#help_outline@3x" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
@@ -326,7 +375,7 @@
                     <ui:Label text="كيفية اللعب" class="base-text-bold" style="font-size: 35px; -unity-text-align: middle-right; color: rgb(117, 117, 117); -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>
                 </ui:VisualElement>
             </ui:Button>
-            <ui:Button text="" name="About" class="menu-button">
+            <ui:Button text="" name="OpenAboutButton" class="menu-button">
                 <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; align-items: center;">
                     <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
                         <ui:Image source="project://database/Assets/Art/export/information.png?fileID=2800000&amp;guid=f96ea4f0c864e1e45852c7516b0ed124&amp;type=3#information" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
@@ -345,4 +394,260 @@
         </ui:VisualElement>
         <ui:Button text="" name="CloseMenuButton" style="flex-grow: 1; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(0, 0, 0, 0.5); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;"/>
     </ui:VisualElement>
+    <ui:VisualElement name="RankingSystemPanel" style="flex-grow: 0; width: 100%; height: 83%; background-color: rgb(255, 255, 255); position: absolute; top: 10%; left: 0; display: none; opacity: 0;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1;">
+            <ui:VisualElement name="ClosePanel" style="flex-grow: 0; flex-direction: row; align-items: center; justify-content: flex-end;">
+                <ui:Label text="نظام الرتب" class="base-text-bold" style="font-size: 50px;"/>
+                <ui:Button name="CloseRankPanelButton" class="button-icon" style="background-color: rgb(238, 238, 238); border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-right-radius: 40%; border-bottom-left-radius: 40%; background-image: url(&quot;project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x&quot;); width: 100px; height: 100px; -unity-background-image-tint-color: rgb(66, 66, 66); background-size: 80% 80%; margin-left: 25px;"/>
+            </ui:VisualElement>
+            <ui:Label text="تقدّم في الرتب من خلال التفوق في كل وضع من أوضاع اللعبة." language-direction="RTL" name="Title" class="base-text-bold" style="font-size: 27px; margin-top: 60px; margin-bottom: 60px; -unity-text-align: upper-center; color: rgb(158, 158, 158);"/>
+            <ui:ScrollView name="NotificationsList" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="height: auto; width: 100%; flex-grow: 1; margin-top: 0;">
+                <ui:VisualElement name="Contant" style="flex-grow: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: rgb(255, 255, 255); display: flex;">
+                    <ui:VisualElement name="RankSlot" enabled="true" class="game-panel rank-slot current-rank-slot">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; width: 100%;">
+                            <ui:VisualElement name="RankName" style="flex-grow: 1; flex-direction: row-reverse; margin-bottom: 25px;">
+                                <ui:VisualElement name="NotificationsImageBackground" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(14, 36, 55, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
+                                    <ui:Image source="project://database/Assets/Art/export/shield@3x.png?fileID=2800000&amp;guid=df23d499387dc634bba3eee0b85d0088&amp;type=3#shield@3x" tint-color="rgb(14, 36, 55)" name="NotificationsImage" style="flex-grow: 0; height: 60px; width: 60px;"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 100px; width: auto; justify-content: space-between;">
+                                    <ui:Label text="مبتدأ" name="NotificationsName" language-direction="RTL" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0; -unity-text-generator: advanced; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-ExtraBold.otf?fileID=12800000&amp;guid=9edc60294a97d7f4e87aee01d4e4d689&amp;type=3#TSHakwaty-ExtraBold&quot;); color: rgb(14, 36, 55);"/>
+                                    <ui:Label text="1,000 — 4,999 نقطة" name="NotificationsTime" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                            <CustomProgressBar background-color="rgb(229, 229, 229)" fill-color="rgb(14, 36, 55)" left-text="2,450 pts " right-text="5,000 pts " style="width: 100%;"/>
+                            <ui:Label text="الرتبة المبدئية. يبدأ كل لاعب من هنا." language-direction="RTL" class="base-text-light" style="align-items: flex-start; -unity-font-style: normal; font-size: 30px; margin-top: 23px;"/>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                    <ui:VisualElement name="RankSlot" enabled="false" class="game-panel rank-slot">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; width: 100%;">
+                            <ui:VisualElement name="RankName" style="flex-grow: 1; flex-direction: row-reverse; margin-bottom: 25px;">
+                                <ui:VisualElement name="NotificationsImageBackground" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(28, 93, 85, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
+                                    <ui:Image source="project://database/Assets/Art/export/psychology@3x.png?fileID=2800000&amp;guid=c3651e8064bc32d408cbcf02b0b19e8d&amp;type=3#psychology@3x" tint-color="rgb(28, 93, 85)" name="NotificationsImage" style="flex-grow: 0; height: 60px; width: 60px;"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 100px; width: auto; justify-content: space-between;">
+                                    <ui:Label text="هاوي" name="NotificationsName" language-direction="RTL" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0; -unity-text-generator: advanced; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-ExtraBold.otf?fileID=12800000&amp;guid=9edc60294a97d7f4e87aee01d4e4d689&amp;type=3#TSHakwaty-ExtraBold&quot;); color: rgb(28, 93, 85);"/>
+                                    <ui:Label text="1,000 — 4,999 نقطة" name="NotificationsTime" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                            <CustomProgressBar background-color="rgb(229, 229, 229)" fill-color="rgb(28, 93, 85)" left-text="2,450 pts " right-text="5,000 pts " style="width: 100%;"/>
+                            <ui:Label text="الرتبة المبدئية. يبدأ كل لاعب من هنا." language-direction="RTL" class="base-text-light" style="align-items: flex-start; -unity-font-style: normal; font-size: 30px; margin-top: 23px;"/>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                    <ui:VisualElement name="RankSlot" enabled="false" class="game-panel rank-slot">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; width: 100%;">
+                            <ui:VisualElement name="RankName" style="flex-grow: 1; flex-direction: row-reverse; margin-bottom: 25px;">
+                                <ui:VisualElement name="NotificationsImageBackground" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(62, 45, 206, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
+                                    <ui:Image source="project://database/Assets/Art/export/workspace_premium@3x.png?fileID=2800000&amp;guid=bfe52c2005a2ba640b15742b944432a6&amp;type=3#workspace_premium@3x" tint-color="rgb(62, 45, 206)" name="NotificationsImage" style="flex-grow: 0; height: 60px; width: 60px;"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 100px; width: auto; justify-content: space-between;">
+                                    <ui:Label text="محترف" name="NotificationsName" language-direction="RTL" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0; -unity-text-generator: advanced; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-ExtraBold.otf?fileID=12800000&amp;guid=9edc60294a97d7f4e87aee01d4e4d689&amp;type=3#TSHakwaty-ExtraBold&quot;); color: rgb(62, 45, 206);"/>
+                                    <ui:Label text="1,000 — 4,999 نقطة" name="NotificationsTime" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                            <CustomProgressBar background-color="rgb(229, 229, 229)" fill-color="rgb(62, 45, 206)" left-text="2,450 pts " right-text="5,000 pts " style="width: 100%;"/>
+                            <ui:Label text="مخصص للاعبين المتميزين." language-direction="RTL" class="base-text-light" style="align-items: flex-start; -unity-font-style: normal; font-size: 30px; margin-top: 23px;"/>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                    <ui:VisualElement name="RankSlot" enabled="false" class="game-panel rank-slot">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; width: 100%;">
+                            <ui:VisualElement name="RankName" style="flex-grow: 1; flex-direction: row-reverse; margin-bottom: 25px;">
+                                <ui:VisualElement name="NotificationsImageBackground" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(245, 97, 26, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
+                                    <ui:Image source="project://database/Assets/Art/export/auto_awesome@3x.png?fileID=2800000&amp;guid=796ec4df04f721d44998a394c81f9cf9&amp;type=3#auto_awesome@3x" tint-color="rgb(245, 97, 26)" name="NotificationsImage" style="flex-grow: 0; height: 60px; width: 60px;"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 100px; width: auto; justify-content: space-between;">
+                                    <ui:Label text="اسطوري" name="NotificationsName" language-direction="RTL" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0; -unity-text-generator: advanced; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-ExtraBold.otf?fileID=12800000&amp;guid=9edc60294a97d7f4e87aee01d4e4d689&amp;type=3#TSHakwaty-ExtraBold&quot;); color: rgb(245, 97, 26);"/>
+                                    <ui:Label text="1,000 — 4,999 نقطة" name="NotificationsTime" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                            <CustomProgressBar background-color="rgb(229, 229, 229)" fill-color="rgb(245, 97, 26)" left-text="2,450 pts " right-text="5,000 pts " style="width: 100%;"/>
+                            <ui:Label text="القمة المطلقة." language-direction="RTL" class="base-text-light" style="align-items: flex-start; -unity-font-style: normal; font-size: 30px; margin-top: 23px;"/>
+                        </ui:VisualElement>
+                        <ui:VisualElement name="RankSlot" enabled="true" class="game-panel" style="flex-grow: 1; background-color: rgba(245, 97, 26, 0.1); height: auto; align-items: flex-end; width: 80%; align-self: center; margin-top: 0;">
+                            <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: center; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; width: 100%;">
+                                <ui:VisualElement name="RankName" style="flex-grow: 1; flex-direction: row-reverse; margin-bottom: 0; align-items: center; font-size: 25px;">
+                                    <ui:Image source="project://database/Assets/Art/export/star@3x.png?fileID=2800000&amp;guid=7c3888adc21e39a40866ea6b34b5c49e&amp;type=3#star@3x" tint-color="rgb(245, 97, 26)" name="NotificationsImage" style="flex-grow: 0; height: 60px; width: 60px; margin-left: 15px;"/>
+                                    <ui:Label text="رتبة الأولمبيون متاحة فقط لـ16 لاعبًا في الوقت ذاته." name="NotificationsName" language-direction="RTL" class="base-text-bold" style="font-size: 23px; height: auto; flex-shrink: 0; -unity-text-generator: advanced; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;); color: rgb(245, 97, 26);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                </ui:VisualElement>
+            </ui:ScrollView>
+        </ui:VisualElement>
+    </ui:VisualElement>
+    <ui:VisualElement name="HowToPlayPanel" style="flex-grow: 0; width: 100%; height: 83%; background-color: rgb(255, 255, 255); position: absolute; top: 10%; left: 0; display: none; opacity: 0;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1;">
+            <ui:VisualElement name="ClosePanel" style="flex-grow: 0; flex-direction: row; align-items: center; justify-content: flex-end;">
+                <ui:Label text="كيفية اللعب" class="base-text-bold" style="font-size: 50px;"/>
+                <ui:Button name="CloseHowToPlayButton" class="button-icon" style="background-color: rgb(238, 238, 238); border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-right-radius: 40%; border-bottom-left-radius: 40%; background-image: url(&quot;project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x&quot;); width: 100px; height: 100px; -unity-background-image-tint-color: rgb(66, 66, 66); background-size: 80% 80%; margin-left: 25px;"/>
+            </ui:VisualElement>
+            <ui:ScrollView name="HowToPlayList" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="height: auto; width: 100%; flex-grow: 1; margin-top: 50px;">
+                <ui:VisualElement name="Contant" style="flex-grow: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: rgb(255, 255, 255); display: flex;">
+                    <ui:VisualElement name="Game" style="flex-grow: 0; flex-direction: column; align-items: flex-end; justify-content: flex-end; margin-bottom: 25px;">
+                        <ui:VisualElement name="Header" style="flex-grow: 0; flex-direction: row; align-items: center;">
+                            <ui:Label text="Correct Statement" name="GameName" class="base-text-bold" style="font-size: 45px;"/>
+                            <ui:VisualElement name="GameImage" style="flex-grow: 0; background-image: none; height: 110px; width: 110px; background-color: rgb(247, 150, 30); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 30px;">
+                                <ui:Image source="project://database/Assets/Art/export/fact_check@3x.png?fileID=2800000&amp;guid=87281401e3cb4d240b0aab6072f033a0&amp;type=3#fact_check@3x" name="Icon" style="flex-grow: 0; height: 70px; width: 70px;"/>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                        <ui:VisualElement name="Rules" class="game-panel" style="flex-grow: 0; background-color: rgb(243, 243, 243); height: auto; width: 100%;">
+                            <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="1" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="اقرأ جميع العبارات بعناية." name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="2" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="اضغط على العبارة الصحيحة من الناحية الواقعية." name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 0;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="3" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="تغلب على المؤقت لتحصل على نقاط إضافية!" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                    <ui:VisualElement name="Game" style="flex-grow: 0; flex-direction: column; align-items: flex-end; justify-content: flex-end; margin-bottom: 25px;">
+                        <ui:VisualElement name="Header" style="flex-grow: 0; flex-direction: row; align-items: center;">
+                            <ui:Label text="True or False" name="GameName" class="base-text-bold" style="font-size: 45px;"/>
+                            <ui:VisualElement name="GameImage" style="flex-grow: 0; background-image: none; height: 110px; width: 110px; background-color: rgb(93, 79, 245); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 30px;">
+                                <ui:Image source="project://database/Assets/Art/export/thumbs_up_down@3x.png?fileID=2800000&amp;guid=7d8eacbd6726901479ea455b9ba7cd55&amp;type=3#thumbs_up_down@3x" name="Icon" style="flex-grow: 0; height: 70px; width: 70px;"/>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                        <ui:VisualElement name="Rules" class="game-panel" style="flex-grow: 0; background-color: rgb(243, 243, 243); height: auto; width: 100%;">
+                            <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="1" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="ستظهر عبارة." name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="2" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="قرر ما إذا كانت صحيحة أم خاطئة." name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 0;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="3" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="السرعة = نقاط أكثر!" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                    <ui:VisualElement name="Game" style="flex-grow: 0; flex-direction: column; align-items: flex-end; justify-content: flex-end; margin-bottom: 25px;">
+                        <ui:VisualElement name="Header" style="flex-grow: 0; flex-direction: row; align-items: center;">
+                            <ui:Label text="Multiple Choice" name="GameName" class="base-text-bold" style="font-size: 45px;"/>
+                            <ui:VisualElement name="GameImage" style="flex-grow: 0; background-image: none; height: 110px; width: 110px; background-color: rgb(38, 136, 107); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 30px;">
+                                <ui:Image source="project://database/Assets/Art/export/quiz@3x.png?fileID=2800000&amp;guid=34d3d99ff582f2e4986b4900703fd8cf&amp;type=3#quiz@3x" name="Icon" style="flex-grow: 0; height: 70px; width: 70px;"/>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                        <ui:VisualElement name="Rules" class="game-panel" style="flex-grow: 0; background-color: rgb(243, 243, 243); height: auto; width: 100%;">
+                            <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="1" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="اقرأ السؤال — قد يحتوي على صور!" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="2" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="اختر من بين 4 إجابات." name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                                <ui:VisualElement name="Slot" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 0;">
+                                    <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 80px; width: 80px; background-color: rgb(62, 45, 206); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 25px;">
+                                        <ui:Label text="3" class="base-text-bold" style="color: rgb(255, 255, 255); font-size: 56px; width: 100%; height: 100%; -unity-text-align: middle-center; translate: 0 6px;"/>
+                                    </ui:VisualElement>
+                                    <ui:Label text="الألعاب المثالية = مكافآت ضخمة!" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                                </ui:VisualElement>
+                            </ui:VisualElement>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                </ui:VisualElement>
+            </ui:ScrollView>
+        </ui:VisualElement>
+    </ui:VisualElement>
+    <ui:VisualElement name="AboutPanel" style="flex-grow: 0; width: 100%; height: 83%; background-color: rgb(255, 255, 255); position: absolute; top: 10%; left: 0; display: none; opacity: 0;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1;">
+            <ui:VisualElement name="ClosePanel" style="flex-grow: 0; flex-direction: row; align-items: center; justify-content: flex-end;">
+                <ui:Label text="حول" class="base-text-bold" style="font-size: 50px;"/>
+                <ui:Button name="CloseAboutButton" class="button-icon" style="background-color: rgb(238, 238, 238); border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-right-radius: 40%; border-bottom-left-radius: 40%; background-image: url(&quot;project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x&quot;); width: 100px; height: 100px; -unity-background-image-tint-color: rgb(66, 66, 66); background-size: 80% 80%; margin-left: 25px;"/>
+            </ui:VisualElement>
+            <ui:ScrollView name="HowToPlayList" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="height: auto; width: 100%; flex-grow: 1; margin-top: 50px;">
+                <ui:VisualElement name="Contant" style="flex-grow: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: rgb(255, 255, 255); display: flex;">
+                    <ui:Image source="project://database/Assets/Art/SSLAB%20LOGOS/4.png?fileID=2800000&amp;guid=6e70911d7dd8a1946862b822d3fcdce1&amp;type=3#4" name="Logo" style="height: 379px;"/>
+                    <ui:Label text="Version 1.0.0" name="Version" class="base-text-light" style="-unity-text-align: upper-center;"/>
+                    <ui:Label text="شارع العلوم هو تطبيق معلومات عامة تنافسي يضم ثلاثة أوضاع للعب.&#10;تحدَّ نفسك، وتقدّم في الرتب، وتنافس مع لاعبين من جميع أنحاء العالم." name="Version" language-direction="RTL" class="base-text-light" style="-unity-text-align: upper-center; margin-top: 50px; margin-bottom: 50px; white-space: pre-wrap; font-size: 26px;"/>
+                    <ui:Button text="" name="Terms" class="game-panel" style="display: flex; background-color: rgb(238, 238, 238); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; margin-top: 0; margin-right: 0; margin-bottom: 50px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; height: auto;">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; align-items: center;">
+                            <ui:Image source="project://database/Assets/Art/export/description@3x.png?fileID=2800000&amp;guid=5274eff63fd22f0479bb495cce04bed1&amp;type=3#description@3x" name="GameImage" tint-color="rgb(189, 189, 189)" style="flex-grow: 0; height: 70px; width: 70px; margin-left: 20px;"/>
+                            <ui:Label text="الشروط" name="GameDescription" language-direction="RTL" class="base-text-bold" style="color: rgb(189, 189, 189); font-size: 26px; white-space: pre-wrap; flex-shrink: 0; translate: 0% 0; -unity-text-align: middle-right;"/>
+                            <ui:Button text="" name="Play" picking-mode="Ignore" class="button-icon" style="position: absolute; right: auto; background-image: url(&quot;project://database/Assets/Art/export/chevron_right@3x.png?fileID=2800000&amp;guid=2432cc5a0f697844dba026768903da1c&amp;type=3#chevron_right@3x&quot;); width: 80px; height: 80px; left: 50px; rotate: 180deg; -unity-background-image-tint-color: rgb(189, 189, 189);"/>
+                        </ui:VisualElement>
+                    </ui:Button>
+                    <ui:Button text="" name="Privacy" class="game-panel" style="display: flex; background-color: rgb(238, 238, 238); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; margin-top: 0; margin-right: 0; margin-bottom: 50px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; height: auto;">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; align-items: center;">
+                            <ui:Image source="project://database/Assets/Art/export/lock@3x.png?fileID=2800000&amp;guid=0a26ab6d1efabef45ad81ac8b01e1695&amp;type=3#lock@3x" name="GameImage" tint-color="rgb(189, 189, 189)" style="flex-grow: 0; height: 70px; width: 70px; margin-left: 20px;"/>
+                            <ui:Label text="الخصوصية" name="GameDescription" language-direction="RTL" class="base-text-bold" style="color: rgb(189, 189, 189); font-size: 26px; white-space: pre-wrap; flex-shrink: 0; translate: 0% 0; -unity-text-align: middle-right;"/>
+                            <ui:Button text="" name="Play" picking-mode="Ignore" class="button-icon" style="position: absolute; right: auto; background-image: url(&quot;project://database/Assets/Art/export/chevron_right@3x.png?fileID=2800000&amp;guid=2432cc5a0f697844dba026768903da1c&amp;type=3#chevron_right@3x&quot;); width: 80px; height: 80px; left: 50px; rotate: 180deg; -unity-background-image-tint-color: rgb(189, 189, 189);"/>
+                        </ui:VisualElement>
+                    </ui:Button>
+                    <ui:Button text="" name="Support" class="game-panel" style="display: flex; background-color: rgb(238, 238, 238); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; margin-top: 0; margin-right: 0; margin-bottom: 50px; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; height: auto;">
+                        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; align-items: center;">
+                            <ui:Image source="project://database/Assets/Art/export/mail@3x.png?fileID=2800000&amp;guid=0d76662a81af3a7408ca3c2975f08b8f&amp;type=3#mail@3x" name="GameImage" tint-color="rgb(189, 189, 189)" style="flex-grow: 0; height: 70px; width: 70px; margin-left: 20px;"/>
+                            <ui:Label text="الدعم" name="GameDescription" language-direction="RTL" class="base-text-bold" style="color: rgb(189, 189, 189); font-size: 26px; white-space: pre-wrap; flex-shrink: 0; translate: 0% 0; -unity-text-align: middle-right;"/>
+                            <ui:Button text="" name="Play" picking-mode="Ignore" class="button-icon" style="position: absolute; right: auto; background-image: url(&quot;project://database/Assets/Art/export/chevron_right@3x.png?fileID=2800000&amp;guid=2432cc5a0f697844dba026768903da1c&amp;type=3#chevron_right@3x&quot;); width: 80px; height: 80px; left: 50px; rotate: 180deg; -unity-background-image-tint-color: rgb(189, 189, 189);"/>
+                        </ui:VisualElement>
+                    </ui:Button>
+                </ui:VisualElement>
+            </ui:ScrollView>
+        </ui:VisualElement>
+    </ui:VisualElement>
+    <ui:VisualElement name="SettingPanel" style="flex-grow: 0; width: 100%; height: 83%; background-color: rgb(255, 255, 255); position: absolute; top: 10%; left: 0; display: none; opacity: 0;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1;">
+            <ui:VisualElement name="ClosePanel" style="flex-grow: 0; flex-direction: row; align-items: center; justify-content: flex-end;">
+                <ui:Label text="الإعدادات" class="base-text-bold" style="font-size: 50px;"/>
+                <ui:Button name="CloseSettingButton" class="button-icon" style="background-color: rgb(238, 238, 238); border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-right-radius: 40%; border-bottom-left-radius: 40%; background-image: url(&quot;project://database/Assets/Art/export/close@3x.png?fileID=2800000&amp;guid=d683a362bf1526f449695bffafe84b91&amp;type=3#close@3x&quot;); width: 100px; height: 100px; -unity-background-image-tint-color: rgb(66, 66, 66); background-size: 80% 80%; margin-left: 25px;"/>
+            </ui:VisualElement>
+            <ui:ScrollView name="SettingList" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="height: auto; width: 100%; flex-grow: 1; margin-top: 50px;">
+                <ui:VisualElement name="Contant" style="flex-grow: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: rgb(255, 255, 255); display: flex;">
+                    <ui:VisualElement name="Padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: column; align-items: flex-end; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; background-color: rgb(255, 255, 255); border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-left-color: rgba(0, 0, 0, 0.1); border-right-color: rgba(0, 0, 0, 0.1); border-top-color: rgba(0, 0, 0, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px;">
+                        <ui:VisualElement name="SFX" style="flex-grow: 0; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 0; width: 100%;">
+                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
+                                <ui:Image source="project://database/Assets/Art/export/volume_up@3x.png?fileID=2800000&amp;guid=a57dabc3e44262143a6604eeacc53105&amp;type=3#volume_up@3x" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
+                            </ui:VisualElement>
+                            <ui:Label text="المؤثرات الصوتية" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                            <CustomSwitch is-on="false" style="position: absolute; left: 0;"/>
+                        </ui:VisualElement>
+                        <ui:VisualElement name="Line" style="flex-grow: 0; width: 100%; background-color: rgba(0, 0, 0, 0.1); height: 2px; margin-top: 25px; margin-bottom: 25px;"/>
+                        <ui:VisualElement name="Music" style="flex-grow: 0; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px; width: 100%;">
+                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
+                                <ui:Image source="project://database/Assets/Art/export/music_note@3x.png?fileID=2800000&amp;guid=2f12c5dea0c10e44ea076fae27af98dc&amp;type=3#music_note@3x" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
+                            </ui:VisualElement>
+                            <ui:Label text="الموسيقي" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                            <CustomSwitch style="position: absolute; left: 0;"/>
+                        </ui:VisualElement>
+                        <ui:VisualElement name="Line" style="flex-grow: 0; width: 100%; background-color: rgba(0, 0, 0, 0.1); height: 2px; margin-top: 25px; margin-bottom: 25px;"/>
+                        <ui:VisualElement name="Notifications" style="flex-grow: 0; flex-direction: row-reverse; align-items: center; height: auto; margin-bottom: 20px; width: 100%;">
+                            <ui:VisualElement name="Image" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgb(250, 250, 250); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-right: 0; margin-left: 35px;">
+                                <ui:Image source="project://database/Assets/Art/export/notifications@3x.png?fileID=2800000&amp;guid=15bed7ff8ecdbcb48bf7f0bca4671383&amp;type=3#notifications@3x" tint-color="rgb(117, 117, 117)" style="flex-grow: 0; height: 50px; width: 50px;"/>
+                            </ui:VisualElement>
+                            <ui:Label text="الإشعارات" name="Text" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+                            <CustomSwitch style="position: absolute; left: 0;"/>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                </ui:VisualElement>
+            </ui:ScrollView>
+        </ui:VisualElement>
+    </ui:VisualElement>
 </ui:UXML>

My project/Assets/Resources/CustomLeaderboardSlot.uxml

@@ -2,7 +2,7 @@
     <Style src="project://database/Assets/AppUI/UIToolkit/USS/Style.uss?fileID=7433441132597879392&amp;guid=f90ac983f14f5f043a3437b2c294db62&amp;type=3#Style"/>
     <ui:Button text="" name="Player" class="menu-button" style="margin-top: 40px;">
         <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; flex-direction: row-reverse; align-items: center; background-color: rgba(0, 0, 0, 0.1); padding-top: 25px; padding-bottom: 25px; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-left-color: rgb(62, 45, 206); border-right-color: rgb(62, 45, 206); border-top-color: rgb(62, 45, 206); border-bottom-color: rgb(62, 45, 206);">
-            <ui:Label text="1" name="IndexLabel" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 34px; margin-left: 30px; width: 60px;"/>
+            <ui:Label text="1" name="IndexLabel" class="base-text-bold" style="color: rgb(158, 158, 158); font-size: 34px; margin-left: 5px; width: 60px;"/>
             <ui:VisualElement name="PlayerImage" style="flex-grow: 0; height: 125px; width: 125px; background-image: url(&quot;project://database/Assets/GUI%20PRO%20Kit%20-%20Simple%20Casual/Sprite/Demo/Demo_Character/UserPicture_01_Sample.png?fileID=2800000&amp;guid=358c17b4dd4c0461f8bcaf75f245f54e&amp;type=3#UserPicture_01_Sample&quot;); -unity-background-scale-mode: scale-to-fit; margin-left: 35px; background-color: rgb(209, 209, 209); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;"/>
             <ui:VisualElement name="GameDetailsPanel" style="height: 117px; width: auto; justify-content: space-between;">
                 <ui:Label text="عبد الرحمن" name="PlayerNameLabel" class="base-text-bold" style="font-size: 40px; height: auto; flex-shrink: 0; -unity-font-definition: url(&quot;project://database/Assets/ALArcade/Hakwaty%20Font/TSHakwaty-DemiBold.otf?fileID=12800000&amp;guid=566b773a07b3d064aa1f4c6ef7b6f6fa&amp;type=3#TSHakwaty-DemiBold&quot;);"/>

My project/Assets/Resources/CustomNotificationsSlot.uxml

+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <ui:VisualElement name="NotificationsSlot" class="game-panel" style="flex-grow: 1; background-color: rgb(243, 243, 243); height: 180px;">
+        <ui:VisualElement name="Padding" class="padding" style="flex-grow: 1; justify-content: flex-start; flex-direction: row-reverse; align-items: center; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;">
+            <ui:VisualElement name="NotificationsImageBackground" style="flex-grow: 0; background-image: none; height: 100px; width: 100px; background-color: rgba(0, 137, 107, 0.15); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.25); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; align-items: center; justify-content: center; margin-left: 50px;">
+                <ui:Image source="project://database/Assets/Art/export/emoji_events@3x.png?fileID=2800000&amp;guid=71ede504623fcb24eaca6ebcf545c812&amp;type=3#emoji_events@3x" tint-color="rgb(0, 137, 107)" name="NotificationsImage" style="flex-grow: 0; height: 60px; width: 60px;"/>
+            </ui:VisualElement>
+            <ui:VisualElement name="GameDetailsPanel" style="flex-grow: 0; height: 100px; width: auto; justify-content: space-between;">
+                <ui:Label text="Correct Statement - 8/10" name="NotificationsName" language-direction="RTL" class="base-text-bold" style="font-size: 30px; height: auto; flex-shrink: 0; -unity-text-generator: advanced;"/>
+                <ui:Label text="01/01/2026 12:30 PM" name="NotificationsTime" language-direction="RTL" class="base-text-bold" style="font-size: 28px; height: auto; flex-shrink: 0; color: rgb(158, 158, 158);"/>
+            </ui:VisualElement>
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>

My project/Assets/Resources/CustomNotificationsSlot.uxml.meta

+fileFormatVersion: 2
+guid: 507658f96be497d4da610e37f029e523
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}

My project/Assets/Resources/CustomSwitch.uxml

+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <Style src="project://database/Assets/AppUI/UIToolkit/USS/Style.uss?fileID=7433441132597879392&amp;guid=f90ac983f14f5f043a3437b2c294db62&amp;type=3#Style"/>
+    <ui:VisualElement name="Switch" class="Switch">
+        <ui:VisualElement name="Point" class="Switch-Dot"/>
+    </ui:VisualElement>
+</ui:UXML>

My project/Assets/Resources/CustomSwitch.uxml.meta

+fileFormatVersion: 2
+guid: b20084208c26d8b45a97b52275cbbf61
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}

My project/Packages/manifest.json

@@ -12,6 +12,7 @@
     "com.unity.multiplayer.center": "1.0.1",
     "com.unity.nuget.newtonsoft-json": "3.2.2",
     "com.unity.postprocessing": "3.5.1",
+    "com.unity.recorder": "5.1.6",
     "com.unity.render-pipelines.universal": "17.3.0",
     "com.unity.shadergraph": "17.3.0",
     "com.unity.test-framework": "1.6.0",

My project/Packages/packages-lock.json

@@ -29,6 +29,15 @@
       },
       "url": "https://packages.unity.com"
     },
+    "com.unity.bindings.openimageio": {
+      "version": "1.0.2",
+      "depth": 1,
+      "source": "registry",
+      "dependencies": {
+        "com.unity.collections": "1.2.4"
+      },
+      "url": "https://packages.unity.com"
+    },
     "com.unity.burst": {
       "version": "1.8.27",
       "depth": 2,
@@ -58,7 +67,7 @@
     },
     "com.unity.collections": {
       "version": "2.6.2",
-      "depth": 2,
+      "depth": 1,
       "source": "registry",
       "dependencies": {
         "com.unity.burst": "1.8.23",
@@ -119,7 +128,7 @@
     },
     "com.unity.nuget.mono-cecil": {
       "version": "1.11.6",
-      "depth": 3,
+      "depth": 2,
       "source": "registry",
       "dependencies": {},
       "url": "https://packages.unity.com"
@@ -140,6 +149,17 @@
       },
       "url": "https://packages.unity.com"
     },
+    "com.unity.recorder": {
+      "version": "5.1.6",
+      "depth": 0,
+      "source": "registry",
+      "dependencies": {
+        "com.unity.timeline": "1.8.7",
+        "com.unity.collections": "1.2.4",
+        "com.unity.bindings.openimageio": "1.0.2"
+      },
+      "url": "https://packages.unity.com"
+    },
     "com.unity.render-pipelines.core": {
       "version": "17.3.0",
       "depth": 1,
@@ -218,7 +238,7 @@
     },
     "com.unity.test-framework.performance": {
       "version": "3.2.0",
-      "depth": 3,
+      "depth": 2,
       "source": "registry",
       "dependencies": {
         "com.unity.test-framework": "1.1.33",

My project/UserSettings/Layouts/CurrentMaximizeLayout.dwlt

@@ -14,8 +14,8 @@ MonoBehaviour:
   m_EditorClassIdentifier: 
   m_Children:
   - {fileID: 3}
-  - {fileID: 8}
-  - {fileID: 13}
+  - {fileID: 9}
+  - {fileID: 14}
   m_Position:
     serializedVersion: 2
     x: 0
@@ -25,7 +25,7 @@ MonoBehaviour:
   m_MinSize: {x: 300, y: 112}
   m_MaxSize: {x: 24288, y: 16192}
   vertical: 0
-  controlID: 15
+  controlID: 3949
   draggingID: 0
 --- !u!114 &2
 MonoBehaviour:
@@ -51,7 +51,7 @@ MonoBehaviour:
     x: 0
     y: 79
     width: 951
-    height: 446
+    height: 499
   m_SerializedDataModeController:
     m_DataMode: 0
     m_PreferredDataMode: 0
@@ -68,7 +68,7 @@ MonoBehaviour:
   m_SerializedViewNames:
   - UnityEditor.DeviceSimulation.SimulatorWindow
   m_SerializedViewValues:
-  - D:\Work Games\ssbookminigames\My project\Library\PlayModeViewStates\42ce1a70d4799004fabc0d4851217d01
+  - D:\Work Games\ssbookminigames\My project\Library\PlayModeViewStates\2f5b92219d50f2a479557362dcd47f63
   m_PlayModeViewName: GameView
   m_ShowGizmos: 0
   m_TargetDisplay: 0
@@ -110,22 +110,22 @@ MonoBehaviour:
       x: 0
       y: 21
       width: 951
-      height: 425
-    m_Scale: {x: 0.22135417, y: 0.22135417}
-    m_Translation: {x: 475.5, y: 212.5}
+      height: 478
+    m_Scale: {x: 0.24895833, y: 0.24895833}
+    m_Translation: {x: 475.5, y: 239}
     m_MarginLeft: 0
     m_MarginRight: 0
     m_MarginTop: 0
     m_MarginBottom: 0
     m_LastShownAreaInsideMargins:
       serializedVersion: 2
-      x: -2148.141
+      x: -1909.9581
       y: -960
-      width: 4296.282
+      width: 3819.9163
       height: 1920
     m_MinimalGUI: 1
-  m_defaultScale: 0.22135417
-  m_LastWindowPixelSize: {x: 951, y: 446}
+  m_defaultScale: 0.24895833
+  m_LastWindowPixelSize: {x: 951, y: 499}
   m_ClearInEditMode: 1
   m_NoCameraWarning: 1
   m_LowResolutionForAspectRatios: 01000000000000000000
@@ -156,7 +156,7 @@ MonoBehaviour:
   m_MinSize: {x: 100, y: 112}
   m_MaxSize: {x: 8096, y: 16192}
   vertical: 1
-  controlID: 16
+  controlID: 3950
   draggingID: 0
 --- !u!114 &4
 MonoBehaviour:
@@ -176,7 +176,7 @@ MonoBehaviour:
     x: 0
     y: 0
     width: 952
-    height: 472
+    height: 525
   m_MinSize: {x: 201, y: 226}
   m_MaxSize: {x: 4001, y: 4026}
   m_ActualView: {fileID: 2}
@@ -194,23 +194,24 @@ MonoBehaviour:
   m_Enabled: 1
   m_EditorHideFlags: 0
   m_Script: {fileID: 12006, guid: 0000000000000000e000000000000000, type: 0}
-  m_Name: ConsoleWindow
+  m_Name: SceneView
   m_EditorClassIdentifier: UnityEditor.dll::UnityEditor.DockArea
   m_Children: []
   m_Position:
     serializedVersion: 2
     x: 0
-    y: 472
+    y: 525
     width: 952
-    height: 461
-  m_MinSize: {x: 51, y: 76}
-  m_MaxSize: {x: 4001, y: 4026}
-  m_ActualView: {fileID: 7}
+    height: 408
+  m_MinSize: {x: 200, y: 200}
+  m_MaxSize: {x: 4000, y: 4000}
+  m_ActualView: {fileID: 6}
   m_Panes:
   - {fileID: 6}
   - {fileID: 7}
-  m_Selected: 1
-  m_LastSelected: 0
+  - {fileID: 8}
+  m_Selected: 0
+  m_LastSelected: 1
 --- !u!114 &6
 MonoBehaviour:
   m_ObjectHideFlags: 52
@@ -233,9 +234,9 @@ MonoBehaviour:
   m_Pos:
     serializedVersion: 2
     x: 0
-    y: 551
+    y: 604
     width: 951
-    height: 435
+    height: 382
   m_SerializedDataModeController:
     m_DataMode: 0
     m_PreferredDataMode: 0
@@ -1028,9 +1029,9 @@ MonoBehaviour:
   m_Pos:
     serializedVersion: 2
     x: 0
-    y: 551
+    y: 604
     width: 951
-    height: 435
+    height: 382
   m_SerializedDataModeController:
     m_DataMode: 0
     m_PreferredDataMode: 0
@@ -1045,6 +1046,44 @@ MonoBehaviour:
     m_OverlaysVisible: 1
     m_DynamicPanelBehavior: 0
 --- !u!114 &8
+MonoBehaviour:
+  m_ObjectHideFlags: 52
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 0}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 7c66a740a74845a08dc18bab7f2ffa03, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: Unity.Recorder.Editor::UnityEditor.Recorder.RecorderWindow
+  m_MinSize: {x: 560, y: 200}
+  m_MaxSize: {x: 4000, y: 4000}
+  m_TitleContent:
+    m_Text: Recorder
+    m_Image: {fileID: 0}
+    m_Tooltip: 
+    m_TextWithWhitespace: "Recorder\u200B"
+  m_Pos:
+    serializedVersion: 2
+    x: 0
+    y: 604
+    width: 951
+    height: 382
+  m_SerializedDataModeController:
+    m_DataMode: 0
+    m_PreferredDataMode: 0
+    m_SupportedDataModes: 
+    isAutomatic: 1
+  m_ViewDataDictionary: {fileID: 0}
+  m_OverlayCanvas:
+    m_LastAppliedPresetName: Default
+    m_SaveData: []
+    m_ContainerData: []
+    m_DynamicPanelContainerData: []
+    m_OverlaysVisible: 1
+    m_DynamicPanelBehavior: 0
+--- !u!114 &9
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}
@@ -1057,8 +1096,8 @@ MonoBehaviour:
   m_Name: 
   m_EditorClassIdentifier: 
   m_Children:
-  - {fileID: 9}
-  - {fileID: 11}
+  - {fileID: 10}
+  - {fileID: 12}
   m_Position:
     serializedVersion: 2
     x: 952
@@ -1068,9 +1107,9 @@ MonoBehaviour:
   m_MinSize: {x: 100, y: 112}
   m_MaxSize: {x: 8096, y: 16192}
   vertical: 1
-  controlID: 68
+  controlID: 3979
   draggingID: 0
---- !u!114 &9
+--- !u!114 &10
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}
@@ -1091,12 +1130,12 @@ MonoBehaviour:
     height: 466
   m_MinSize: {x: 202, y: 226}
   m_MaxSize: {x: 4002, y: 4026}
-  m_ActualView: {fileID: 10}
+  m_ActualView: {fileID: 11}
   m_Panes:
-  - {fileID: 10}
+  - {fileID: 11}
   m_Selected: 0
   m_LastSelected: 0
---- !u!114 &10
+--- !u!114 &11
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}
@@ -1138,13 +1177,17 @@ MonoBehaviour:
     m_TreeViewState:
       scrollPos: {x: 0, y: 0}
       m_SelectedIDs:
-      - m_Data: 53946
+      - m_Data: 54366
       m_LastClickedID:
         m_Data: 0
       m_ExpandedIDs:
+      - m_Data: -27376
+      - m_Data: -26502
+      - m_Data: -20502
+      - m_Data: -19410
+      - m_Data: -16146
+      - m_Data: -6806
       - m_Data: -1342
-      - m_Data: 55550
-      - m_Data: 55568
       m_RenameOverlay:
         m_UserAcceptedRename: 0
         m_Name: 
@@ -1162,7 +1205,7 @@ MonoBehaviour:
         m_OriginalEventType: 11
         m_IsRenamingFilename: 0
         m_TrimLeadingAndTrailingWhitespace: 0
-        m_ClientGUIView: {fileID: 9}
+        m_ClientGUIView: {fileID: 10}
       m_SearchString: 
     m_ExpandedScenes: []
     m_CurrenRootInstanceID: 0
@@ -1170,7 +1213,7 @@ MonoBehaviour:
       m_IsLocked: 0
     m_CurrentSortingName: TransformSorting
   m_WindowGUID: 8e49cb6d5117e7f48bcaabb9b257c061
---- !u!114 &11
+--- !u!114 &12
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}
@@ -1191,12 +1234,12 @@ MonoBehaviour:
     height: 467
   m_MinSize: {x: 232, y: 276}
   m_MaxSize: {x: 10002, y: 10026}
-  m_ActualView: {fileID: 12}
+  m_ActualView: {fileID: 13}
   m_Panes:
-  - {fileID: 12}
+  - {fileID: 13}
   m_Selected: 0
   m_LastSelected: 0
---- !u!114 &12
+--- !u!114 &13
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}
@@ -1264,19 +1307,21 @@ MonoBehaviour:
   m_FolderTreeState:
     scrollPos: {x: 0, y: 0}
     m_SelectedIDs:
-    - m_Data: 56098
+    - m_Data: 56184
     m_LastClickedID:
-      m_Data: 56098
+      m_Data: 56184
     m_ExpandedIDs:
     - m_Data: 0
-    - m_Data: 55682
-    - m_Data: 55684
-    - m_Data: 55686
-    - m_Data: 55688
-    - m_Data: 55690
-    - m_Data: 55692
-    - m_Data: 56026
-    - m_Data: 56100
+    - m_Data: 56000
+    - m_Data: 56002
+    - m_Data: 56004
+    - m_Data: 56006
+    - m_Data: 56008
+    - m_Data: 56010
+    - m_Data: 56112
+    - m_Data: 56114
+    - m_Data: 56186
+    - m_Data: 56192
     m_RenameOverlay:
       m_UserAcceptedRename: 0
       m_Name: 
@@ -1294,7 +1339,7 @@ MonoBehaviour:
       m_OriginalEventType: 11
       m_IsRenamingFilename: 1
       m_TrimLeadingAndTrailingWhitespace: 0
-      m_ClientGUIView: {fileID: 11}
+      m_ClientGUIView: {fileID: 12}
     m_SearchString: 
     m_CreateAssetUtility:
       m_EndAction: {fileID: 0}
@@ -1309,12 +1354,13 @@ MonoBehaviour:
       m_Data: 0
     m_ExpandedIDs:
     - m_Data: 0
-    - m_Data: 55682
-    - m_Data: 55684
-    - m_Data: 55686
-    - m_Data: 55688
-    - m_Data: 55690
-    - m_Data: 55692
+    - m_Data: 56002
+    - m_Data: 56004
+    - m_Data: 56006
+    - m_Data: 56008
+    - m_Data: 56010
+    - m_Data: 56112
+    - m_Data: 56186
     m_RenameOverlay:
       m_UserAcceptedRename: 0
       m_Name: 
@@ -1342,11 +1388,12 @@ MonoBehaviour:
       m_ResourceFile: 
   m_ListAreaState:
     m_SelectedInstanceIDs:
-    - m_Data: 53946
-    m_LastClickedInstanceID: 53946
+    - m_Data: 54366
+    m_LastClickedInstanceID: 54366
     m_HadKeyboardFocusLastEvent: 1
     m_ExpandedInstanceIDs:
     - m_Data: 60788
+    - m_Data: 60258
     m_RenameOverlay:
       m_UserAcceptedRename: 0
       m_Name: 
@@ -1364,7 +1411,7 @@ MonoBehaviour:
       m_OriginalEventType: 11
       m_IsRenamingFilename: 1
       m_TrimLeadingAndTrailingWhitespace: 0
-      m_ClientGUIView: {fileID: 11}
+      m_ClientGUIView: {fileID: 12}
     m_CreateAssetUtility:
       m_EndAction: {fileID: 0}
       m_InstanceID: 0
@@ -1376,7 +1423,7 @@ MonoBehaviour:
     m_GridSize: 64
   m_SkipHiddenPackages: 0
   m_DirectoriesAreaWidth: 166.8
---- !u!114 &13
+--- !u!114 &14
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}
@@ -1395,14 +1442,14 @@ MonoBehaviour:
     y: 0
     width: 357
     height: 933
-  m_MinSize: {x: 276, y: 76}
-  m_MaxSize: {x: 4001, y: 4026}
-  m_ActualView: {fileID: 14}
+  m_MinSize: {x: 275, y: 50}
+  m_MaxSize: {x: 4000, y: 4000}
+  m_ActualView: {fileID: 15}
   m_Panes:
-  - {fileID: 14}
+  - {fileID: 15}
   m_Selected: 0
   m_LastSelected: 0
---- !u!114 &14
+--- !u!114 &15
 MonoBehaviour:
   m_ObjectHideFlags: 52
   m_CorrespondingSourceObject: {fileID: 0}

My project/UserSettings/Layouts/default-6000.dwlt

@@ -1668,12 +1668,12 @@ MonoBehaviour:
       m_Data: 56148
     m_ExpandedIDs:
     - m_Data: 0
-    - m_Data: 55682
-    - m_Data: 55684
-    - m_Data: 55686
-    - m_Data: 55688
-    - m_Data: 55690
-    - m_Data: 55692
+    - m_Data: 56000
+    - m_Data: 56002
+    - m_Data: 56004
+    - m_Data: 56006
+    - m_Data: 56008
+    - m_Data: 56010
     m_RenameOverlay:
       m_UserAcceptedRename: 0
       m_Name: 
@@ -1706,12 +1706,12 @@ MonoBehaviour:
       m_Data: 0
     m_ExpandedIDs:
     - m_Data: 0
-    - m_Data: 55682
-    - m_Data: 55684
-    - m_Data: 55686
-    - m_Data: 55688
-    - m_Data: 55690
-    - m_Data: 55692
+    - m_Data: 56000
+    - m_Data: 56002
+    - m_Data: 56004
+    - m_Data: 56006
+    - m_Data: 56008
+    - m_Data: 56010
     m_RenameOverlay:
       m_UserAcceptedRename: 0
       m_Name: