Add background slideshow and some styles

src/App.css

@@ -8,6 +8,5 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: url('./images/leandro_1.jpeg') no-repeat center center fixed;
   background-size: cover;
 }

src/App.js

@@ -1,5 +1,3 @@
-import './App.css';
-
 import React from 'react';
 import './App.css';
 import VideoSelector from './VideoSelector';
@@ -12,4 +10,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/VideoSelector.css

@@ -1,44 +1,120 @@
 body {
-    margin: 0;
-    padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background: url('./images/leandro_1.jpeg') no-repeat center center fixed;
-    background-size: cover;
-  }
-
-  .selector-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    backdrop-filter: blur(10px);
-  }
-
-  form {
-    background: rgba(255, 255, 255, 0.8);
-    padding: 20px;
-    border-radius: 8px;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 10px;
-  }
-
-  select {
-    margin-left: 10px;
-  }
-
-  .video-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-  }
-
-  iframe {
-    width: 50%;
-    height: 80%;
-  }
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+}
+
+.background-slideshow {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: flex;
+}
+
+.background-slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+  filter: blur(2px);
+}
+
+.background-slide.active {
+  opacity: 1;
+}
+
+.selector-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 1;
+}
+
+form {
+  background: rgba(255, 255, 255, 0.5); /* Add transparency to the form */
+  padding: 20px;
+  border-radius: 8px;
+  backdrop-filter: blur(5px); /* Add blur effect to the form background */
+  max-width: 400px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.form-field {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+select {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>') no-repeat right 10px center;
+  background-size: 16px 16px;
+}
+
+button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007bff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+
+select {
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.video-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  backdrop-filter: blur(5px);
+}
+
+iframe {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+}

src/VideoSelector.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import './VideoSelector.css'; // Create a CSS file for styling
 
@@ -8,6 +8,23 @@ const VideoSelector = () => {
   const [option3, setOption3] = useState('');
   const [videoUrl, setVideoUrl] = useState('');
   const [youtubeUrl, setYoutubeUrl] = useState('');
+  const [currentBackground, setCurrentBackground] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentBackground((prev) => (prev + 1) % backgroundImages.length);
+    }, 5000); // Change image every 5 seconds
+    return () => clearInterval(interval);
+  });
+
+
+  const backgroundImages = [
+    './images/leandro_1.jpeg',
+    './images/leandro_2.jpeg',
+    './images/leandro_3.jpeg',
+    './images/leandro_4.jpeg',
+    './images/leandro_5.jpeg'
+  ];
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -26,12 +43,21 @@ const VideoSelector = () => {
   if (videoUrl) {
     return (
       <div className="video-container">
+        <div className="background-slideshow">
+        {backgroundImages.map((image, index) => (
+          <div
+            key={index}
+            className={`background-slide ${index === currentBackground ? 'active' : ''}`}
+            style={{ backgroundImage: `url(${image})` }}
+          ></div>
+        ))}
+      </div>
         <iframe
           src={videoUrl}
           frameBorder="0"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
-          autoplay
+          autoPlay
           title="Video"
         ></iframe>
       </div>
@@ -41,17 +67,35 @@ const VideoSelector = () => {
   if (youtubeUrl) {
     return (
       <div className="video-container">
+        <div className="background-slideshow">
+        {backgroundImages.map((image, index) => (
+          <div
+            key={index}
+            className={`background-slide ${index === currentBackground ? 'active' : ''}`}
+            style={{ backgroundImage: `url(${image})` }}
+          ></div>
+        ))}
+      </div>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=eHQqRxzl9RyaaDfm?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
       </div>
     );
   }
 
   return (
     <div className="selector-container">
+      <div className="background-slideshow">
+        {backgroundImages.map((image, index) => (
+          <div
+            key={index}
+            className={`background-slide ${index === currentBackground ? 'active' : ''}`}
+            style={{ backgroundImage: `url(${image})` }}
+          ></div>
+        ))}
+      </div>
       <form onSubmit={handleSubmit}>
         <div>
           <label>
-            What teams played on the Europa League on the 4th of April 2018?:
+            What teams played in the Europa League on the 4th of April 2018?
             <select value={option1} onChange={(e) => setOption1(e.target.value)}>
               <option value="">Select...</option>
               <option value="option1A">1. FC Köln - Bayern München</option>
@@ -62,7 +106,7 @@ const VideoSelector = () => {
         </div>
         <div>
           <label>
-            What costume did Imke wear Halloween 2019?:
+            What costume did Imke wear Halloween 2019?
             <select value={option2} onChange={(e) => setOption2(e.target.value)}>
               <option value="">Select...</option>
               <option value="option2A">Giraffe</option>
@@ -73,7 +117,7 @@ const VideoSelector = () => {
         </div>
         <div>
           <label>
-            Which words were displayed on the wall in La Cocina Negra?:
+            Which words were displayed on the wall in La Cocina Negra?
             <select value={option3} onChange={(e) => setOption3(e.target.value)}>
               <option value="">Select...</option>
               <option value="option3A">Você é uma gatinha</option>