diff --git a/assets/backVideo.mp4 b/assets/backVideo.mp4 new file mode 100644 index 00000000..48915a55 Binary files /dev/null and b/assets/backVideo.mp4 differ diff --git a/assets/background.jpg b/assets/background.jpg new file mode 100644 index 00000000..c7f0c479 Binary files /dev/null and b/assets/background.jpg differ diff --git a/assets/logo1.png b/assets/logo1.png new file mode 100644 index 00000000..667e7b5d Binary files /dev/null and b/assets/logo1.png differ diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index bb2eb8d8..00000000 Binary files a/favicon.ico and /dev/null differ diff --git a/index.html b/index.html index e69de29b..5723d2bb 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + Document + + + + +
+ +
+ +

JAMES BOND'S APP

+
+ + +
+
+ + +
+ +

Login Error

+ +
+
+ + + diff --git a/main.js b/main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/mainScreen.html b/mainScreen.html new file mode 100644 index 00000000..106b8ac7 --- /dev/null +++ b/mainScreen.html @@ -0,0 +1,78 @@ + + + + + + + Document + + + + + + +
+ + + +
+
+
+
+ + +
+ +
+
+

+ Country: + +

+

+ Population: + +

+

+ Capital city: + +

+
+
+
+
+

New Bond's identity

+ +
+

Name:

+

Email:

+
+ +
+
+ +
+ + + diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 00000000..4fd2833e --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,31 @@ +console.log("index"); + +const $login = document.getElementById('login_input') +const $password = document.getElementById('password_input') +const $loginButton = document.getElementById('login_button') +const $loginError = document.getElementById('login_error') + +const loginHenler = () => { + const password = $password.value; + const login = $login.value; + + fetch("https://login-service-wsb-wj.netlify.app/.netlify/functions/login", { + method: "POST", + body: JSON.stringify({ + login, + password, + }), + }) + .then((response) => response.json()) + .then((response) => { + console.log(response); + if (response.isLogged === true) { + localStorage.setItem('isLoggedIn', "yes"); + window.location.href = "./mainScreen.html"; + } else { + $loginError.classList.remove("not_visible"); + } + }); +}; + +$loginButton.addEventListener("click", loginHenler); \ No newline at end of file diff --git a/scripts/mainScreen.js b/scripts/mainScreen.js new file mode 100644 index 00000000..0d89fa64 --- /dev/null +++ b/scripts/mainScreen.js @@ -0,0 +1,74 @@ +const $logout = document.getElementById("logout"); +const $countryButton = document.getElementById("country_button"); +const $countryInput = document.getElementById("country_input"); +const $generateButton = document.getElementById("generate_id"); +const $toggleButton = document.getElementById("toggle_screen"); + +$toggleButton.addEventListener('click', () => { + document.getElementById('general_screen').classList.toggle("hidden"); + document.getElementById('notes_screen').classList.toggle("hidden"); +}); + +var map = L.map("map").setView([0, 0], 4); +L.tileLayer( + "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=iPs2II5wDO4QdjAgdFTQ", + +{ + attribution: + '© MapTiler © OpenStreetMap contributors' +} + +).addTo(map); + +const logout = () => { + localStorage.setItem("isLoggedIn", "no"); + window.location.href = "/"; +}; + +const isLoggedIn = localStorage.getItem("isLoggedIn"); +if (isLoggedIn !== "yes") { + logout(); +} + +const searchCountry = () => { + const country = $countryInput.value; + fetch(`https://restcountries.com/v3.1/name/${country}`) + .then((res) => res.json()) + .then((res) => { + const country = res[0]; + + if (country) { + const capital = country.capital.join(","); + const fullName = country.name.official; + const population = country.population; + + document.getElementById("country_fullname").innerText = fullName; + document.getElementById("country_population").innerText = population; + document.getElementById("country_capital").innerText = capital; + + map.panTo(country.latlng, { animate: true, duration: 1.0 }); + } + + console.log(res); + }); +}; + +$generateButton.addEventListener("click", () => { + fetch('https://randomuser.me/api/') + .then((res) => res.json()) + .then((res) => { + console.log(res); + const newName = res.results[0].name.first + ' ' + res.results[0].name.last; + const email = res.results[0].email + const avatar = res.results[0].picture.medium; + + document.getElementById('new_email').innerText = email; + document.getElementById('new_name').innerText = newName; + document.getElementById('new_picture').src = avatar; + + +}); +}); + +$logout.addEventListener("click", logout); +$countryButton.addEventListener("click", searchCountry); diff --git a/style.css b/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..6b5f6a88 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,48 @@ +@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); + +* { + font-family: 'Special Elite', cursive; +} + +.not_visible { + visibility: hidden; +} + +body { + padding: 0; + margin: 0; + min-height: 100vh; + background-image: url("../assets/background.jpg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.input_container { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + margin-bottom: 20px; +} + +.input_container input { + background: transparent; + border: none; + border-bottom: 1px solid white; + color: ghostwhite; + padding: 5px; +} + +.btn { + width: 120px; + background-color: rgba(0, 128, 0, 0.613); + border: 2px solid darkgreen; + padding: 10px 20px; + color: ghostwhite; + cursor: pointer; +} + +.hidden { + display: none; +} \ No newline at end of file diff --git a/styles/login.css b/styles/login.css new file mode 100644 index 00000000..0d54b300 --- /dev/null +++ b/styles/login.css @@ -0,0 +1,28 @@ +.logo { + height: 100px; +} + +.background_video { + height: 100vh; + width: 100%; + object-fit: cover; + position: absolute; + z-index: 1; + filter: brightness(0.25); +} + +.login_container { + z-index: 10; + color: ghostwhite; + width: 450px; + position: absolute; + top:50%; + left:50%; + transform: translate(-50%, -50%); + padding: 20px; + text-align: center; +} + +#login_error { + color: red; +} \ No newline at end of file diff --git a/styles/mainScreen.css b/styles/mainScreen.css new file mode 100644 index 00000000..7767cb94 --- /dev/null +++ b/styles/mainScreen.css @@ -0,0 +1,52 @@ +#logout { + position: absolute; + top: 20px; + right: 20px; + } + + .logo { + height: 100px; + } + + main { + text-align: center; + max-width: 1000px; + margin: auto; + } + + .single_section { + background-color: rgba(0, 0, 0, 0.59); + display: flex; + flex-direction: column; + color: ghostwhite; + padding: 20px; + margin-top: 30px; + } + + #map { + height: 300px; + max-width: 500px; + width: 100%; + margin:auto; + } + + #new_picture { + height: 100px; + width: 100px; + margin: auto; + } + + #generate_id { + margin: auto; + } + + #toggle_screen { + position: absolute; + top: 20px; + left: 20px; + } + + .notes li:hover { + cursor:pointer; + text-decoration: line-through; + } \ No newline at end of file