update interface of the home screen

src/main/java/com/dinosaur/dinosaurexploder/view/DinosaurMenu.java

@@ -8,16 +8,28 @@
 import com.almasb.fxgl.ui.FontType;
 import com.dinosaur.dinosaurexploder.DinosaurApp;
 import com.dinosaur.dinosaurexploder.model.GameConstants;
-import com.almasb.fxgl.localization.Language;
 
+import javafx.animation.Interpolator;
+import javafx.animation.TranslateTransition;
+import javafx.beans.value.ChangeListener;
+import javafx.beans.value.ObservableValue;
+import javafx.geometry.Pos;
 import javafx.scene.control.Button;
+import javafx.scene.control.Label;
+import javafx.scene.control.Slider;
+
+import com.almasb.fxgl.localization.Language;
 import javafx.scene.control.ComboBox;
+
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
+import javafx.scene.layout.BorderPane;
 import javafx.scene.media.Media;
 import javafx.scene.media.MediaPlayer;
 import javafx.scene.paint.Color;
 import javafx.scene.shape.Rectangle;
+
+import javafx.util.Duration;
 import java.io.InputStream;
 import javafx.beans.value.ChangeListener;
 import javafx.beans.value.ObservableValue;
@@ -33,6 +45,7 @@
 import javafx.scene.layout.StackPane;
 import static com.almasb.fxgl.dsl.FXGL.getLocalizationService;
 
+
 public class DinosaurMenu extends FXGLMenu {
     private MediaPlayer mainMenuSound;
 
@@ -50,6 +63,10 @@ public DinosaurMenu() {
         var startButton = new Button("Start Game");
         var quitButton = new Button("Quit");
 
+        //Adding styles to the buttons
+        startButton.getStylesheets().add(Objects.requireNonNull(getClass().getResource("/styles/styles.css")).toExternalForm());
+        quitButton.getStylesheets().add(Objects.requireNonNull(getClass().getResource("/styles/styles.css")).toExternalForm());
+
         // Add the language selection UI
         ComboBox<String> languageComboBox = new ComboBox<>();
         languageComboBox.getItems().addAll("English", "German", "Spanish", "French", "Russian");
@@ -106,6 +123,7 @@ public DinosaurMenu() {
 
         // Assuming 'root' is the layout for the menu
 
+
         Slider volumeSlider = new Slider(0, 1, 1);
         volumeSlider.setBlockIncrement(0.01);
 
@@ -137,6 +155,32 @@ public void changed(ObservableValue<? extends Number> observable, Number oldValu
             if (soundButton == null) {
                 throw new FileNotFoundException("Resource not found: assets/textures/playing.png");
             }
+            InputStream backGround = getClass().getClassLoader().getResourceAsStream("assets/textures/background.png");
+            if (backGround == null) {
+                throw new FileNotFoundException("Resource not found: assets/textures/background.png");
+            }
+
+            Image Background = new Image(backGround);
+            ImageView imageViewB = new ImageView(Background);
+            imageViewB.setFitHeight(DinosaurGUI.HEIGHT);
+            //imageViewB.setFitWidth(200);
+            imageViewB.setX(0);
+            imageViewB.setY(0);
+            imageViewB.setPreserveRatio(true);
+
+
+            // Create a TranslateTransition for horizontal scrolling
+            TranslateTransition translateTransition = new TranslateTransition();
+            translateTransition.setNode(imageViewB);
+            translateTransition.setDuration(Duration.seconds(50)); // Set the duration for one cycle
+            translateTransition.setFromX(0);
+            translateTransition.setToX(-Background.getWidth()+DinosaurGUI.WIDTH*3.8); // Move to the left by the width of the image
+            translateTransition.setCycleCount(TranslateTransition.INDEFINITE); // Repeat indefinitely
+            translateTransition.setInterpolator(Interpolator.LINEAR); // Smooth linear transition
+            translateTransition.setAutoReverse(true);
+
+            // Start the transition
+            translateTransition.play();
 
             // image for dino in main menu
             Image image = new Image(menuImage);
@@ -168,11 +212,11 @@ public void changed(ObservableValue<? extends Number> observable, Number oldValu
 
             startButton.setTranslateY(400);
             startButton.setTranslateX(getAppWidth() / 2 - 50);
-            startButton.setStyle("-fx-font-size:20");
+            //startButton.setStyle("-fx-font-size:20");
 
             quitButton.setTranslateY(500);
             quitButton.setTranslateX(getAppWidth() / 2 - 50);
-            quitButton.setStyle("-fx-font-size:20");
+            //quitButton.setStyle("-fx-font-size:20");
 
             BorderPane root = new BorderPane();
             root.setTop(title);
@@ -212,9 +256,12 @@ public void changed(ObservableValue<? extends Number> observable, Number oldValu
             quitButton.setOnAction(event -> fireExit());
 
             getContentRoot().getChildren().addAll(
-                    bg, title, languageBox, startButton, quitButton, imageView, imageViewPlaying, volumeLabel,
-                    volumeSlider);
-        } catch (FileNotFoundException e) {
+
+                    imageViewB, title, startButton, quitButton, imageView, imageViewPlaying, volumeLabel, volumeSlider
+            );
+        }
+        catch (FileNotFoundException e){
+
             System.out.println("File not found" + e.getMessage());
         }
     }
@@ -231,4 +278,4 @@ public void onEnteredFrom(Scene prevState) {
         mainMenuSound.play();
     }
 
-}
+}

src/main/resources/Styles/styles.css

@@ -14,3 +14,26 @@
     -fx-background-radius: 10;
     -fx-background-color: #005500;
 }
+
+.button {
+    -fx-background-color: linear-gradient(to bottom, #2a2a2a, #1a1a1a),
+    linear-gradient(to bottom, rgba(0, 220, 0, 0.9), rgba(0, 200, 255, 0.6));
+    -fx-background-radius: 37;
+    -fx-border-color: rgba(0, 220, 0, 1), rgba(0, 200, 255, 0.8);
+    -fx-border-width: 2;
+    -fx-border-radius: 37;
+    -fx-text-fill: white;
+    -fx-font-size: 16px;
+    -fx-effect: dropshadow(gaussian, rgba(0, 220, 0, 0.7), 10, 0.5, 0, 0),
+    dropshadow(gaussian, rgba(0, 200, 255, 0.5), 20, 0.3, 0, 0);
+    -fx-padding: 5 15 5 15;
+}
+
+.button:hover {
+    -fx-background-color: linear-gradient(to bottom, #1a1a1a, #2a2a2a),
+    linear-gradient(to bottom, rgba(0, 255, 0, 0.9), rgba(0, 220, 255, 0.7));
+    -fx-border-color: rgba(0, 255, 0, 1), rgba(0, 220, 255, 0.8);
+    -fx-effect: dropshadow(gaussian, rgba(0, 255, 0, 0.9), 15, 0.6, 0, 0),
+    dropshadow(gaussian, rgba(0, 220, 255, 0.7), 25, 0.4, 0, 0);
+
+}