From 8d7351a64849100066e7c479ef2fe42a80f1ca25 Mon Sep 17 00:00:00 2001
From: Nopole Flairan <151444383+Favourez@users.noreply.github.com>
Date: Sat, 15 Jun 2024 05:10:58 +0100
Subject: [PATCH] Add files via upload

---
 applyjobs.html |  88 ++++++++++++++++++++++++++++++++
 g_maps.html    |  72 ++++++++++++++++++++++++++
 homepage.html  | 133 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |  15 ++++++
 job.html       | 104 ++++++++++++++++++++++++++++++++++++++
 login.html     | 103 ++++++++++++++++++++++++++++++++++----
 6 files changed, 504 insertions(+), 11 deletions(-)
 create mode 100644 applyjobs.html
 create mode 100644 g_maps.html
 create mode 100644 homepage.html
 create mode 100644 index.html
 create mode 100644 job.html
diff --git a/applyjobs.html b/applyjobs.html
new file mode 100644
index 0000000..3ccc89b
--- /dev/null
+++ b/applyjobs.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Job Application</title>
+  <link rel="stylesheet" href="applyjobs.css">
+</head>
+<body>
+  <div class="container">
+    <img class="logo" src="images/logo.png" alt="Logo">
+    <h1>Job Application</h1>
+    <form id="applicationForm">
+      <label for="name">Name:</label>
+      <input type="text" id="name" placeholder="Name" required>
+
+      <label for="email">Email:</label>
+      <input type="email" id="email" placeholder="Email" required>
+
+      <label for="phone">Phone Number:</label>
+      <input type="tel" id="phone" placeholder="Phone Number" required>
+
+      <label for="salary">Proposed Salary:</label>
+      <input type="text" id="salary" placeholder="Proposed Salary" required>
+
+      <label for="resume">Upload Resume:</label>
+      <input type="file" id="resume" accept=".pdf,.doc,.docx" required>
+
+      <input type="submit" value="Submit" class="sub" id="submit">
+    </form>
+  </div>
+
+  <script type="module">
+    // Import the functions you need from the SDKs you need
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
+    import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
+    import { getStorage, ref as sRef, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-storage.js";
+
+    // Your web app's Firebase configuration
+    const firebaseConfig = {
+      apiKey: "AIzaSyD-0Zsn12h8fomXZZePyY0AfWw38vxN69Q",
+      authDomain: "applyjobsnow-fa329.firebaseapp.com",
+      projectId: "applyjobsnow-fa329",
+      storageBucket: "applyjobsnow-fa329.appspot.com",
+      messagingSenderId: "310207482942",
+      appId: "1:310207482942:web:4fe4fd3fa730ef7fb0956f"
+    };
+
+    // Initialize Firebase
+    const app = initializeApp(firebaseConfig);
+    const database = getDatabase(app);
+    const storage = getStorage(app);
+
+    document.getElementById("applicationForm").addEventListener('submit', function(e) {
+      e.preventDefault();
+      const name = document.getElementById("name").value;
+      const email = document.getElementById("email").value;
+      const phone = document.getElementById("phone").value;
+      const salary = document.getElementById("salary").value;
+      const resume = document.getElementById("resume").files[0];
+
+      if (resume) {
+        const storageRef = sRef(storage, 'resumes/' + resume.name);
+        uploadBytes(storageRef, resume).then((snapshot) => {
+          getDownloadURL(snapshot.ref).then((downloadURL) => {
+            set(ref(database, 'applications/' + name), {
+              name: name,
+              email: email,
+              phone: phone,
+              salary: salary,
+              resumeURL: downloadURL
+            }).then(() => {
+              alert("Application submitted successfully!");
+              document.getElementById("applicationForm").reset();
+            }).catch((error) => {
+              console.error("Error writing to database: ", error);
+              alert("Error submitting application. Please try again.");
+            });
+          });
+        }).catch((error) => {
+          console.error("Error uploading file: ", error);
+          alert("Error uploading resume. Please try again.");
+        });
+      } else {
+        alert("Please upload a resume.");
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/g_maps.html b/g_maps.html
new file mode 100644
index 0000000..4572cd5
--- /dev/null
+++ b/g_maps.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>My Google Map</title>
+    <style>
+        /* Set the size of the map div to fill the entire screen */
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+
+<!-- The div where the map will be displayed -->
+<div id="map"></div>
+
+<!-- Load the Google Maps JavaScript API -->
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6jKjuPclpVAaeWHFLIvhhKzN4ILkAubM&callback=initMap" async defer></script>
+<script>
+    // Initialize and add the map
+    function initMap() {
+        // Default location (latitude and longitude)
+        var defaultLocation = { lat: -25.344, lng: 131.036 };
+        
+        // Create the map centered on the default location
+        var map = new google.maps.Map(document.getElementById('map'), {
+            zoom: 4,
+            center: defaultLocation
+        });
+        
+        // Default marker
+        var marker = new google.maps.Marker({ position: defaultLocation, map: map });
+        
+        // Try HTML5 geolocation.
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    var userLocation = {
+                        lat: position.coords.latitude,
+                        lng: position.coords.longitude
+                    };
+                    
+                    // Re-center the map and place a new marker at the user's location
+                    map.setCenter(userLocation);
+                    map.setZoom(12);  // Zoom in closer to the user's location
+                    marker.setPosition(userLocation);
+                },
+                function() {
+                    handleLocationError(true, map.getCenter());
+                }
+            );
+        } else {
+            // Browser doesn't support Geolocation
+            handleLocationError(false, map.getCenter());
+        }
+    }
+
+    function handleLocationError(browserHasGeolocation, pos) {
+        alert(browserHasGeolocation
+              ? 'Error: The Geolocation service failed.'
+              : 'Error: Your browser doesn\'t support geolocation.');
+    }
+</script>
+
+</body>
+</html>
diff --git a/homepage.html b/homepage.html
new file mode 100644
index 0000000..5618ad4
--- /dev/null
+++ b/homepage.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <link rel="stylesheet" href="styles/homestyle.css">
+</head>
+<body>
+    <header class="navbar">
+        <div class="container">
+            <a href="#" class="logo">JoB BoARD</a>
+            
+            <nav>
+                <input type="text" placeholder="What service are you looking for today?" class="search-bar">
+                <ul class="nav-links">
+                    <li><a href="footers/careers.html">JoB Select</a></li>
+                    <li><a href="top/messages.html">Messages</a></li>
+                    <li><a href="top/orders.html">Orders</a></li>
+                    <li><a href="g_maps.html" class="user-profile">Maps</a></li>
+                    <li><a href="JoBBOARD.html" class="user-profile">Log Out</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    
+    <nav class="sub-nav">
+        <ul>
+            <li><a href="adds/graphics.html">Graphics & Design</a></li>
+            <li><a href="top/tech.html">Programming & Tech</a></li>
+            <li><a href="top/home.html">Home Keeping</a></li>
+            <li><a href="top/video.html">Video & Animation</a></li>
+            <li><a href="top/driver.html">Driver</a></li>
+            <li><a href="top/music.html">Music & Audio</a></li>
+            <li><a href="top/acc.html">Accountant</a></li>
+            <li><a href="top/teacher.html">Teacher</a></li>
+            <li><a href="top/data.html">Data Analysis</a></li>
+            <li><a href="top/ai.html">AI Services</a></li>
+        </ul>
+    </nav>
+    
+    <section class="welcome-banner">
+        <div class="container">
+            <h1>Welcome back, <span id="username"></span> <span>👋</span></h1>
+            <div class="recommendations">
+                <div class="recommendation-card">
+                    <h3>Search For Jobs</h3>
+                    <p>Create a brief and get custom offers.</p>
+                    <a href="footers/careers.html">Search for Job</a>
+                </div>
+                <div class="recommendation-card">
+                    <h3>Post a Job</h3>
+                    <p>Tell us a bit about your job offer</p>
+                    <a href="footers/postjobs.html">Post Job</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <section class="browsing-history">
+        <div class="container">
+            <h2>Based on your browsing history</h2>
+            <div class="history-grid">
+                <div class="history-item">
+                    <img src="images/house.png" alt="History Item 1">
+                    <p>House Keeping <span>50000/mth</span></p>
+                </div>
+                <div class="history-item">
+                    <img src="images/garage.png" alt="History Item 2">
+                    <p>Garage <span>100000/mth</span></p>
+                </div>
+                <div class="history-item">
+                    <img src="images/nanny.png" alt="History Item 3">
+                    <p>Nanny <span>70000/mth</span></p>
+                </div>
+                <div class="history-item">
+                    <img src="images/driver.png" alt="History Item 4">
+                    <p>Driver <span>30000/day</span></p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <footer>
+        <div class="container">
+            <div class="footer-nav">
+                <div>
+                    <h3>Categories</h3>
+                    <ul>
+                        <li><a href="adds/graphics.html">Graphics & Design</a></li>
+                        <li><a href="adds/digital.html">Digital Marketing</a></li>
+                        <li><a href="adds/writing.html">Writing & Translation</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3>About</h3>
+                    <ul>
+                        <li><a href="footers/careers.html">Careers</a></li>
+                        <li><a href="footers/pressnews.html">Press & News</a></li>
+                        <li><a href="footers/partnerships.html">Partnerships</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3>Support</h3>
+                    <ul>
+                        <li><a href="footers/helpsupport.html">Help & Support</a></li>
+                        <li><a href="footers/trustsafe.html">Trust & Safety</a></li>
+                        <li><a href="footers/postjobs.html">Post a Job</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3>Community</h3>
+                    <ul>
+                        <li><a href="footers/customerstories.html">Customer Success Stories</a></li>
+                        <li><a href="footers/commhub.html">Community Hub</a></li>
+                        <li><a href="footers/forum.html">Forum</a></li>
+                    </ul>
+                </div>
+            </div>
+            <p>&copy; JoB BoARD International Ltd. 2024</p>
+        </div>
+    </footer>
+    <script src="sessiontimeout.js">
+        // Retrieve the username from localStorage and display it
+        const username = sessionStorage.getItem('username');
+        if (username) {
+            document.getElementById('username').textContent = username;
+        } else {
+            // Redirect to login page if username is not found
+            window.location.href = 'login.html';
+        }
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e781ff9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>JoB BoARD</title>
+  <link rel="stylesheet" href="styles/styles.css">
+</head>
+<body>
+  <div class="container">
+    <img class="logo" src="images/logo.png" alt="Logo">
+    <h1>JoB BoARD</h1>
+    <a href="signup.html" class="button">Sign Up</a>
+    <a href="login.html" class="button">Log In</a>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/job.html b/job.html
new file mode 100644
index 0000000..55fd08d
--- /dev/null
+++ b/job.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fiverr Replica</title>
+    <link rel="stylesheet" href="styles/job.css">
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div class="logo">Fiverr</div>
+            <nav>
+                <ul>
+                    <li><a href="#">Fiverr Pro</a></li>
+                    <li><a href="#">Explore</a></li>
+                    <li><a href="#">Become a Seller</a></li>
+                    <li><a href="#">Sign In</a></li>
+                    <li><a href="#" class="join">Join</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <section class="hero">
+        <div class="container">
+            <h1>Find the right freelance service, right away</h1>
+            <div class="search-bar">
+                <input type="text" placeholder="Try 'building mobile app'">
+                <button>Search</button>
+            </div>
+            <div class="trusted-by">
+                <span>Trusted by:</span>
+                <img src="images/facebook.png" alt="Facebook">
+                <img src="images/google.png" alt="Google">
+                <img src="images/netflix.png" alt="Netflix">
+                <img src="images/pg.png" alt="P&G">
+                <img src="images/paypal.png" alt="PayPal">
+            </div>
+        </div>
+    </section>
+    <section class="services">
+        <div class="container">
+            <h2>Popular Services</h2>
+            <div class="service-list">
+                <div class="service">
+                    <img src="images/ai.webp" alt="AI Services">
+                    <p>Add talent to AI</p>
+                </div>
+                <div class="service">
+                    <img src="images/loglos.png" alt="Logo Design">
+                    <p>Build your brand</p>
+                </div>
+                <div class="service">
+                    <img src="images/wordpress.png" alt="WordPress">
+                    <p>Customize your site</p>
+                </div>
+                <div class="service">
+                    <img src="images/voiceode.png" alt="Voice Over">
+                    <p>Share your message</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <footer>
+        <div class="container">
+            <div class="footer-nav">
+                <div>
+                    <h3>Categories</h3>
+                    <ul>
+                        <li><a href="#">Graphics & Design</a></li>
+                        <li><a href="#">Digital Marketing</a></li>
+                        <li><a href="#">Writing & Translation</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3>About</h3>
+                    <ul>
+                        <li><a href="#">Careers</a></li>
+                        <li><a href="#">Press & News</a></li>
+                        <li><a href="#">Partnerships</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3>Support</h3>
+                    <ul>
+                        <li><a href="#">Help & Support</a></li>
+                        <li><a href="#">Trust & Safety</a></li>
+                        <li><a href="#">Selling on Fiverr</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3>Community</h3>
+                    <ul>
+                        <li><a href="#">Customer Success Stories</a></li>
+                        <li><a href="#">Community Hub</a></li>
+                        <li><a href="#">Forum</a></li>
+                    </ul>
+                </div>
+            </div>
+            <p>&copy; Fiverr International Ltd. 2024</p>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/login.html b/login.html
index 8a78c9b..aaf6291 100644
--- a/login.html
+++ b/login.html
@@ -1,18 +1,99 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login</title>
-    <link rel="stylesheet" href="css/styles.css">
+  <title>Login Page</title>
+  <link rel="stylesheet" href="styles/style.css">
 </head>
 <body>
-    <h1>Login</h1>
-    <form id="login-form">
-        <input type="email" id="email" placeholder="Email" required>
-        <input type="password" id="password" placeholder="Password" required>
-        <button type="submit">Login</button>
+  <div class="container">
+    <img class="logo" src="images/logo.png" alt="Logo">
+    <h1>Login Page</h1>
+    <form id="loginForm">
+      <input type="email" id="email" placeholder="Email" required>
+      <input type="username" id="username" placeholder="username" required>
+      <input type="password" id="password" placeholder="Password" required>
+      <input type="submit" value="Submit" class="sub" id="submit">
+      <a href="#" onclick="loginWithGoogle()" class="button">Login with Google</a>
     </form>
-    <script src="js/login.js"></script>
+  </div>
+  
+  <script type="module">
+    // Import the functions you need from the SDKs you need
+    // todo: import the authentication methods form SDK methods
+    // import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js;
+    // import { getAuth, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-auth.js";
+    // import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-database.js";
+    
+    
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js";
+    import { getAuth, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-auth.js";
+    
+    // Your web app's Firebase configuration
+    const firebaseConfig = {
+      apiKey: "AIzaSyCQ2pqMF9AGpqswdTeahsoDC1M57aErafM",
+      authDomain: "job-board-c0cba.firebaseapp.com",
+      projectId: "job-board-c0cba",
+      storageBucket: "job-board-c0cba.appspot.com",
+      messagingSenderId: "952776217509",
+      appId: "1:952776217509:web:ae94c4e0ec99e9b9f9ce4c",
+      measurementId: "G-TG7JQNR5J4"
+    };
+
+    // Initialize Firebase
+    // Firebase
+    
+    const app = initializeApp(firebaseConfig);
+    const auth = getAuth(app);
+
+    // Login with email and password
+    document.getElementById("loginForm").addEventListener('submit', function(e) {
+      e.preventDefault();
+      const email = document.getElementById("email").value;
+      const password = document.getElementById("password").value;
+
+      // signInWithEmailAndPassword(auth, email, password)
+      //.then((userCredential) => {
+      //   // Signed in
+      //   const user = userCredential.user;
+      //   //...
+      // })
+      //.catch((error) => {
+      //   const errorCode = error.code;
+      //   const errorMessage = error.message;
+      //   const email = error.email;
+      //   const credential = GoogleAuthProvider.credentialFromError(error);
+      //   //...
+      // });
+
+      signInWithEmailAndPassword(auth, email, password)
+        .then((userCredential) => {
+          // Signed in successfully
+          alert("Login successful");
+          sessionStorage.setItem('username', username); // Store username in session storage
+            window.location.href = 'homepage.html';
+        })
+        .catch((error) => {
+          const errorCode = error.code;
+          const errorMessage = error.message;
+          alert(`Error: ${errorMessage}`);
+        });
+    });
+
+    // Login with Google
+    function loginWithGoogle() {
+      const provider = new GoogleAuthProvider();
+      signInWithPopup(auth, provider)
+        .then((result) => {
+          // Google login successful
+          alert("Login with Google successful");
+          window.location.href = 'homepage.html';
+        })
+        .catch((error) => {
+          const errorCode = error.code;
+          const errorMessage = error.message;
+          alert(`Error: ${errorMessage}`);
+        });
+    }
+  </script>
 </body>
 </html>
