diff --git a/src/images/leandro_1.jpeg b/public/images/leandro_1.jpeg similarity index 100% rename from src/images/leandro_1.jpeg rename to public/images/leandro_1.jpeg diff --git a/public/images/leandro_2.jpeg b/public/images/leandro_2.jpeg new file mode 100644 index 0000000..1ed7653 Binary files /dev/null and b/public/images/leandro_2.jpeg differ diff --git a/public/images/leandro_3.jpeg b/public/images/leandro_3.jpeg new file mode 100644 index 0000000..04a4f36 Binary files /dev/null and b/public/images/leandro_3.jpeg differ diff --git a/public/images/leandro_4.jpeg b/public/images/leandro_4.jpeg new file mode 100644 index 0000000..1c0e9a9 Binary files /dev/null and b/public/images/leandro_4.jpeg differ diff --git a/public/images/leandro_5.jpeg b/public/images/leandro_5.jpeg new file mode 100644 index 0000000..7787127 Binary files /dev/null and b/public/images/leandro_5.jpeg differ diff --git a/src/App.css b/src/App.css index 831da1b..633219f 100644 --- a/src/App.css +++ b/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; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index ef9609d..0797026 100644 --- a/src/App.js +++ b/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; \ No newline at end of file diff --git a/src/VideoSelector.css b/src/VideoSelector.css index 9cea99e..452126f 100644 --- a/src/VideoSelector.css +++ b/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%; - } \ No newline at end of file + 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,') 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; +} \ No newline at end of file diff --git a/src/VideoSelector.js b/src/VideoSelector.js index fd156a0..82f2078 100644 --- a/src/VideoSelector.js +++ b/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 (
+
+ {backgroundImages.map((image, index) => ( +
+ ))} +
@@ -41,6 +67,15 @@ const VideoSelector = () => { if (youtubeUrl) { return (
+
+ {backgroundImages.map((image, index) => ( +
+ ))} +
); @@ -48,10 +83,19 @@ const VideoSelector = () => { return (
+
+ {backgroundImages.map((image, index) => ( +
+ ))} +