cdv-poznan · xhu87 · May 30, 2022 · May 30, 2022 · May 30, 2022
diff --git a/assets/backVideo.mp4 b/assets/backVideo.mp4
diff --git a/assets/background.jpg b/assets/background.jpg
diff --git a/assets/logo1.png b/assets/logo1.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/global.css" />
+    <link rel="stylesheet" href="./styles/login.css" />
+  </head>
+  <body>
+    <section class="login_screen">
+      <video
+        loop
+        autoplay
+        muted
+        src="./assets/backVideo.mp4"
+        class="background_video"
+      ></video>
+      <div class="login_container">
+        <img src="./assets/logo1.png" class="logo" />
+        <h1 class="login_title">JAMES BOND'S APP</h1>
+        <div class="input_container">
+          <label>AGENT ID</label>
+          <input id="login_input" value="007"/>
+        </div>
+        <div class="input_container">
+          <label>PASSWORD</label>
+          <input type="password" id="password_input" />
+        </div>
+        <button class="btn" id="login_button">LOG IN</button>
+        <p id="login_error" class="not_visible">Login Error</p>
+        <p class="login_text">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis
+          cum, temporibus amet fuga sit maxime voluptatum quam, odio delectus
+          ipsum aperiam praesentium. Tempore quae nulla modi! Amet iure qui
+          maiores.
+        </p>
+      </div>
+    </section>
+    <script src="./scripts/index.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
diff --git a/mainScreen.html b/mainScreen.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/global.css" />
+    <link rel="stylesheet" href="./styles/mainScreen.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
+      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+      crossorigin=""
+    ></script>
+  </head>
+  <body>
+    <main>
+      <button class="btn" id="toggle_screen">Toggle screen</button>
+      <button class="btn" id="logout">LOGOUT</button>
+      <img src="./assets/logo1.png" class="logo" />
+      <div id="general_screen">
+        <section class="country_section single_section">
+          <div class="country_inputs">
+            <div class="input_container">
+              <label>Bond, where are you going?</label>
+              <input id="country_input" value="Poland" />
+            </div>
+            <button class="btn" id="country_button">Check</button>
+          </div>
+          <div class="country_labels">
+            <p>
+              <span class="data_label">Country:</span>
+              <span class="data_value" id="country_fullname"></span>
+            </p>
+            <p>
+              <span class="data_label">Population:</span>
+              <span class="data_value" id="country_population"></span>
+            </p>
+            <p>
+              <span class="data_label">Capital city:</span>
+              <span class="data_value" id="country_capital"></span>
+            </p>
+          </div>
+          <div id="map"></div>
+        </section>
+        <section class="single_section">
+          <h2>New Bond's identity</h2>
+          <img
+            src="https://cdn-icons-png.flaticon.com/512/147/147144.png"
+            id="new_picture"
+          />
+          <div>
+            <p><span>Name: </span><span id="new_name"></span></p>
+            <p><span>Email: </span><span id="new_email"></span></p>
+          </div>
+          <button class="btn" id="generate_id">Generate</button>
+        </section>
+      </div>
+      <div id="notes_screen" class="hidden">
+          <section class="single_section">
+          <h2>Notes</h2>
+          <ul class="notes">
+              <li>Text1Text1</li>
+              <li>Text2Text2</li>
+              <li>Text3Text3</li>
+          </ul>
+              </section>
+      </div>
+    </main>
+    <script src="./scripts/mainScreen.js"></script>
+  </body>
+</html>
diff --git a/scripts/index.js 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);
diff --git a/scripts/mainScreen.js 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:
+    '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
+}
+
+).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
diff --git a/styles/global.css 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;
+}
diff --git a/styles/login.css 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;
+}
diff --git a/styles/mainScreen.css 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;
+  }