diff --git a/assets/backVideo.mp4 b/assets/backVideo.mp4 new file mode 100644 index 00000000..067db186 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..bae6afa0 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + Document + + + + + +
+ +
+ +

JAMES BOND'S APP

+
+ + +
+
+ + +
+ + +

Login Error

+ + +
+
+ + + + \ No newline at end of file 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..3aa239a9 --- /dev/null +++ b/mainScreen.html @@ -0,0 +1,77 @@ + + + + + + + + + Document + + + + + + + +
+ + +
+
+
+
+ + +
+ +
+
+

+ Country: + +

+

+ Population: + +

+

+ Capital city: + +

+ +
+
+ +
+
+
+

New Bond's identity

+ +
+

Name:

+

Email:

+ + +
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 00000000..e3f9b80e --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,60 @@ +const $login = document.getElementById("login_input"); +const $Password = document.getElementById("password_input"); +const $loginButton = document.getElementById("login_button"); +const $loginError= document.getElementById("login_error"); +//https://login-service-wsb-wj.netlify.app/.netlify/functions/login + +/* +const loginHandler = async () => { + const password = $Password.value; + const login = $login.value; + + const response = await fetch('https://login-service-wsb-wj.netlify.app/.netlify/functions/login', { + method: "POST", + body: JSON.stringify({ + + login, + password, + + }), + }); + + const responseParsed = await response.json(); + + if (response.isLogged) { + window.location.href = "./mainScreen.html"; + } else { + $loginError.classList.remove("not_visible"); + } + +}; +*/ + +const loginHandler = () => { + 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) { + localStorage.setItem("isLoggedIn", "yes"); + window.location.href = "./mainScreen.html"; + } else { + $loginError.classList.remove("not_visible"); + } +}); +}; + + +$loginButton.addEventListener("click", loginHandler); \ No newline at end of file diff --git a/scripts/mainScreen.js b/scripts/mainScreen.js new file mode 100644 index 00000000..fa029356 --- /dev/null +++ b/scripts/mainScreen.js @@ -0,0 +1,135 @@ + +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"); + +const $toggleScreens = document.getElementById("toggle_screens"); +const $addTask = document.getElementById("add_task"); +const $taskList = document.getElementById("task_list"); +const $newTaskInput = document.getElementById("new_task_input"); +const $loadTasks = document.getElementById("load_tasks"); + + +$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], 5); +L.tileLayer('https://api.maptiler.com/maps/toner/{z}/{x}/{y}.png?key=LI4L28yACgdpBon0bgPY', { + attributtion: '© 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: 2.0}); + + } + + console.log(res); + }); + +}; + +$generateButton.addEventListener("click", () => { + fetch('https://randomuser.me/api/') + .then((res) => res.json()) + .then((res) => { + const id = res.results[0]; + if (id) { + + const newName = id.name.first + " " + id.name.last; + const email = id.email; + const avatar = id.picture.medium; + + + + document.getElementById("new_name").innerText = newName; + document.getElementById("new_eamil").innerText = email; + document.getElementById("new_picture").src = avatar; + + } + console.log(res); + }); +}); + + + + $addTask.addEventListener("click", () => { + const newTask = $newTaskInput.value; + $newTaskInput.value = ""; + const listElement = document.createElement("li"); + listElement.classList.add("task"); + listElement.innerText = newTask; + $taskList.append(listElement); + const tasksFromLS = localStorage.getItem("tasks") + ? JSON.parse(localStorage.getItem("tasks")) + : []; + console.log(tasksFromLS); + tasksFromLS.push(newTask); + localStorage.setItem("tasks", JSON.stringify(tasksFromLS)); + }); + + $taskList.addEventListener("click", (e) => { + if (e.target.classList.contains("task")) { + const taskToDelete = e.target.innerText; + e.target.remove(); + const tasksFromLS = localStorage.getItem("tasks") + ? JSON.parse(localStorage.getItem("tasks")) + : []; + const tasksAfterDelete = tasksFromLS.filter( + (task) => task !== taskToDelete + ); + localStorage.setItem("tasks", JSON.stringify(tasksAfterDelete)); + } + }); + + $loadTasks.addEventListener("click", () => { + if ($taskList.childNodes.length === 0) { + const tasksFromLS = localStorage.getItem("tasks") + ? JSON.parse(localStorage.getItem("tasks")) + : []; + + tasksFromLS.forEach((taskText) => { + const listElement = document.createElement("li"); + listElement.classList.add("task"); + listElement.innerText = taskText; + $taskList.append(listElement); + }); + } + }); + +$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..2768eea5 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,64 @@ +@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); + + +* { + font-family: 'Special Elite', cursive; +} + +html { + font-size: 62.5%; +} + +.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; + font-size: large; +} + +.input_container { + display: flex; + justify-content: center; + align-content: center; + gap: 1.6rem; + margin-bottom: 2rem; +} + +.input_container input { + background: transparent; + border: none; + border-bottom: .1rem solid ghostwhite; + color: ghostwhite; + padding: .5rem; +} + +.btn { + width: 12rem; + background-color: rgba(16, 167, 16, 0.419); + border: .2rem solid darkgreen; + padding: 1rem 2rem; + color: ghostwhite; + cursor: pointer; + border-radius: 1rem; + +} + +.btn:hover { + transform: translateY(-.3rem); +} + +.btn:active{ + transform: translateY(-.1rem); +} + +.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..64962b83 --- /dev/null +++ b/styles/login.css @@ -0,0 +1,28 @@ +.logo { + height: 20rem; +} + +.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: 45rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 2rem; + 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..4c8782f5 --- /dev/null +++ b/styles/mainScreen.css @@ -0,0 +1,66 @@ +#logout { + position: absolute; + top: 2rem; + right: 2rem; + +} + +#toggle_screen { + position: absolute; + top: 2rem; + left: 2rem; + +} + +.logo { + height: 10rem; + +} + +main { + text-align: center; + max-width: 100rem; + margin: auto; + +} + +.single_section { + background-color: rgba(0, 0, 0, 0.59); + display: flex; + flex-direction: column; + color: ghostwhite; + padding: 2rem; + margin-bottom: 3rem; + +} + +#map { + height: 30rem; + max-width: 50rem; + width: 100%; + margin: auto; +} + +#new_picture { + height: 10rem; + width: 10rem; + margin: auto; + border-radius: 2rem; +} + +#generate_id { + margin: auto; +} + +.task:hover { + text-decoration: line-through; + cursor: pointer; + } + +#task_list li { + list-style: none; +} + +.input_container label { + margin-top: 2.5rem; +} \ No newline at end of file