Projekt_SS25/Project_Periodensystem.View/PeriodicTablePage.axaml

<!-- PeriodicTablePage.axaml -->
<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:conv="clr-namespace:Project_Periodensystem.View.Converters"
             x:Class="Project_Periodensystem.View.PeriodicTablePage">

    <UserControl.Styles>
        <Style Selector="Button">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Width" Value="250"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>
        <Style Selector="Button:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="DarkRed"/>
        </Style>
        <Style Selector="Button:pressed /template/ ContentPresenter">
            <Setter Property="Background" Value="Red"/>
        </Style>
        <Style Selector="Button TextBlock">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!-- Separate styles for navigation buttons -->
        <Style Selector="Button.NavigationButton">
            <Setter Property="Width" Value="250"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>

        <!-- Element tile specific styles - ALWAYS white text -->
        <Style Selector="Button.ElementTile">
            <Setter Property="Width" Value="55"/>
            <Setter Property="Height" Value="55"/>
            <Setter Property="Margin" Value="2"/>
        </Style>

        <!-- Specific styles for element tile content -->
        <Style Selector="Button.ElementTile > StackPanel > TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        
        <!-- Different sizes for symbol and number -->
        <Style Selector="Button.ElementTile > StackPanel > TextBlock.Symbol">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <Style Selector="Button.ElementTile > StackPanel > TextBlock.Number">
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!-- Force white text for element tiles and their content -->
        <Style Selector="Grid#PeriodicGrid Button">
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style Selector="Grid#PeriodicGrid Button TextBlock">
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style Selector="Grid#PeriodicGrid Button > StackPanel > TextBlock">
            <Setter Property="Foreground" Value="White"/>
        </Style>

        <!-- Legend styles -->
        <Style Selector="Border.LegendItem">
            <Setter Property="Width" Value="120"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="CornerRadius" Value="4"/>
        </Style>
        
        <Style Selector="Border.LegendItem TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </UserControl.Styles>

    <UserControl.Resources>
        <conv:SeriesToColorConverter x:Key="SeriesToColor"/>
    </UserControl.Resources>

    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Legend - ohne dunklen Hintergrund -->
        <WrapPanel Grid.Row="0" 
                   HorizontalAlignment="Center" 
                   Orientation="Horizontal">
            
            <!-- Farben aus SeriesToColorConverter verwenden -->
            <Border Classes="LegendItem" Background="#6c3b01">
                <TextBlock Text="Alkalimetalle"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#846011">
                <TextBlock Text="Erdalkalimetalle"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#402c17">
                <TextBlock Text="Lanthanoide"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#732e4c">
                <TextBlock Text="Actinoide"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#711019">
                <TextBlock Text="Übergangsmetalle"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#555555">
                <TextBlock Text="Post-Übergang"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#015146">
                <TextBlock Text="Halbmetalle"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#3e6418">
                <TextBlock Text="Nichtmetalle"/>
            </Border>
            
            <Border Classes="LegendItem" Background="#3a2151">
                <TextBlock Text="Edelgase"/>
            </Border>
            
        </WrapPanel>

        <!-- Periodic Table Grid -->
        <ScrollViewer Grid.Row="2" 
                     HorizontalScrollBarVisibility="Auto" 
                     VerticalScrollBarVisibility="Auto">
            <Grid Name="PeriodicGrid"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ScrollViewer>

        <!-- Footer with Buttons -->
        <Grid Grid.Row="3" 
              Margin="0,20,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
                
            <Button Name="ThemeButton"
                    Grid.Column="0"
                    Click="ThemeButton_Click"
                    Width="250"
                    Height="40">
                <TextBlock Text="Theme wechseln"
                          FontSize="16"
                          HorizontalAlignment="Center"/>
            </Button>

            <Button x:Name="AboutButton"
                    Grid.Column="2"
                    Click="AboutButton_Click"
                    Width="200"
                    Height="40">
                <TextBlock Text="About"
                          FontSize="16"
                          HorizontalAlignment="Center"/>
            </Button>
        </Grid>
    </Grid>
</UserControl>