Skip to content

Commit

Permalink
Add Website
Browse files Browse the repository at this point in the history
  • Loading branch information
3r1co committed Jul 1, 2024
1 parent 33e0e83 commit dfbc12d
Show file tree
Hide file tree
Showing 11 changed files with 183 additions and 54 deletions.
32 changes: 32 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
Expand Down
Binary file modified public/favicon.ico
Binary file not shown.
6 changes: 1 addition & 5 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
Expand All @@ -24,7 +20,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Leandros Big Bachelor Bash</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file removed public/logo192.png
Binary file not shown.
Binary file removed public/logo512.png
Binary file not shown.
43 changes: 9 additions & 34 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,12 @@
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
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;
}
20 changes: 5 additions & 15 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import logo from './logo.svg';
import './App.css';

import React from 'react';
import './App.css';
import VideoSelector from './VideoSelector';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<VideoSelector />
</div>
);
}
Expand Down
44 changes: 44 additions & 0 deletions src/VideoSelector.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
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%;
}
91 changes: 91 additions & 0 deletions src/VideoSelector.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React, { useState } from 'react';
import axios from 'axios';
import './VideoSelector.css'; // Create a CSS file for styling

const VideoSelector = () => {
const [option1, setOption1] = useState('');
const [option2, setOption2] = useState('');
const [option3, setOption3] = useState('');
const [videoUrl, setVideoUrl] = useState('');
const [youtubeUrl, setYoutubeUrl] = useState('');

const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('https://4hr26wm5cb.execute-api.us-east-1.amazonaws.com/leandros-bachelor-password', {
option1,
option2,
option3
});
setVideoUrl(response.data.url);
} catch (error) {
setYoutubeUrl("aabb");
}
};

if (videoUrl) {
return (
<div className="video-container">
<iframe
src={videoUrl}
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
autoplay
title="Video"
></iframe>
</div>
);
}

if (youtubeUrl) {
return (
<div className="video-container">
<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">
<form onSubmit={handleSubmit}>
<div>
<label>
What teams played on 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>
<option value="option1B">RB Leipzig - Olympique de Marseille</option>
<option value="option1C">Fluminense FC - SE Palmeiras</option>
</select>
</label>
</div>
<div>
<label>
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>
<option value="option2B">Vampire Zombie</option>
<option value="option2C">Penguin</option>
</select>
</label>
</div>
<div>
<label>
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>
<option value="option3B">Solo la puntita</option>
<option value="option3C">De Puta Madre</option>
</select>
</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
};

export default VideoSelector;
Binary file added src/images/leandro_1.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit dfbc12d

Please sign in to comment.