aravsahni7 Sahni posted an update — Apr 27, 2025 11:00 AM EDT

https://github.com/alfarhat07/JAC-HACKS--LocalScope-.git

aravsahni7 Sahni posted an update — Apr 27, 2025 10:58 AM EDT

!DOCTYPE html> LocalScope

<header>
  <div id="logo-div">
    <h1 class="logo-text" id="logo-text">
      Local<span id="scope">Scope</span>
    </h1>
  </div>
  <heading class="page1">
    <button onclick="window.location.href='./public/about.html'" class="aboutButton" id="abtBtn">
      About
    </button>


  </heading>
  <br />
  <br />
  <div class="card">
    <div class="card-content">
      <p class="card-text">
        Discover what's happening<br />
        <span id="wherever">wherever you go</span>
      </p>
    </div>
  </div>
  <br />
  <p>
    LocalScope uses AI powered tools to look at nearby databases to provide
    you with important information surrounding the areas you may want to
    visit!
  </p>
</header>
<div id="space"></div>

<main>
  <p>
    To start with, enter your town or postal code, or allow us to directly
    take your location:
  </p>
  <div class="input-container">
    <img
      id="location-icon"
      src="./assets/location-icon.png"
      alt="Location Icon"
    />
    <input
      type="text"
      class="location-input"
      placeholder="Enter a place or postal code..."
    />
  </div>
  <br />
  <div class="use-location">
    <p>or</p>
    <button onclick="getLocation()" id="location-button">
      use my location
    </button>
  </div>


</main>

<script>
  let userInput;

  // get lat & lon from chrome
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        var rawPosition = "latitude=" + lat + "&longitude=" + lon;
        getTown(lat, lon);
      });
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }
  // using openstreetmap to change the coords given by native js into a town name
  async function getTown(latitude, longitude) {
    const response = await fetch(
      `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}`
    );
    const data = await response.json();
    userInput =
      data.address.city || data.address.town || data.address.village;
    sendToResults();
  }

  // grab the input location
  const locationInput = document.querySelector(".location-input");
  locationInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
      userInput = encodeURIComponent(locationInput.value);
      sendToResults();
    }
  });
  function sendToResults() {
    window.location.href = `./public/results.html?text=${userInput}`;
  }

  // show the sign up form
  const showForm = document.getElementById("showForm");
  const formOverlay = document.getElementById("formOverlay");

  // Show form with transition
  showForm.addEventListener("click", () => {
    formOverlay.style.display = "flex";
    setTimeout(() => {
      formOverlay.classList.add("active");
    }, 10);
  });

  // Close form with transition
  function closeForm() {
    formOverlay.classList.remove("active");
    setTimeout(() => {
      formOverlay.style.display = "none";
    }, 300);
  }
  // Form submission and validation
  document
    .querySelector(".form")
    .addEventListener("submit", async function (e) {
      e.preventDefault();

      try {
        // check if passwords are... actually the same
        const password = this.querySelector('input[name="password"]').value;
        const confirmPassword = this.querySelector(
          'input[name="confirm_password"]'
        ).value;

        if (password !== confirmPassword) {
          throw new Error("Passwords do not match");
        }

        // loading
        const submitBtn = this.querySelector(".submit");
        submitBtn.disabled = true;
        submitBtn.textContent = "Signing up...";

        // grab registration data
        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        console.log("Sending data:", data); // debug log

        const res = await fetch("http://localhost:5001/signup", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify(data),
        });

        if (!res.ok) {
          const result = await res.json().catch(() => ({})); // handle non-JSON response?
          throw new Error(result.message || "Signup failed");
        }

        alert("Signup successful!");
        closeForm();
      } catch (error) {
        console.error("Error:", error); // debug log
        if (error.name === "TypeError") {
          alert("Network error: Failed to connect to the server.");
        } else {
          alert(error.message);
        }
      } finally {
        // reset button state
        const submitBtn = this.querySelector(".submit");
        submitBtn.disabled = false;
        submitBtn.textContent = "Submit";
      }
    });

  // Close form when clicking outside
  formOverlay.addEventListener("click", (e) => {
    if (e.target === formOverlay) {
      closeForm();
    }
  });




  const showSignIn = document.getElementById("showSignIn");
  const signInOverlay = document.getElementById("signInOverlay");
  const switchToSignUp = document.getElementById("switchToSignUp");

  showSignIn.addEventListener("click", (e) => {
    e.preventDefault();
    closeForm(); 
    signInOverlay.style.display = "flex";
    setTimeout(() => {
        signInOverlay.classList.add("active");
    }, 10);
  });


  function closeSignIn() {
      signInOverlay.classList.remove("active");
      setTimeout(() => {
          signInOverlay.style.display = "none";
      }, 300);
  }


  switchToSignUp.addEventListener("click", (e) => {
      e.preventDefault();
      closeSignIn();
      formOverlay.style.display = "flex";
      setTimeout(() => {
          formOverlay.classList.add("active");
      }, 10);
  });


  document.getElementById("signInForm").addEventListener("submit", async function(e) {
      e.preventDefault();

      try {
          const submitBtn = this.querySelector(".submit");
          submitBtn.disabled = true;
          submitBtn.textContent = "Signing in...";

          const formData = new FormData(this);
          const data = Object.fromEntries(formData.entries());

          const res = await fetch("http://localhost:5001/signin", {
              method: "POST",
              headers: {
                  "Content-Type": "application/json",
                  "Accept": "application/json"
              },
              body: JSON.stringify(data)
          });

          if (!res.ok) {
              const result = await res.json().catch(() => ({}));
              throw new Error(result.message || "Sign in failed");
          }

          alert("Sign in successful!");
          closeSignIn();
      } catch (error) {
          console.error("Error:", error);
          if (error.name === "TypeError") {
              alert("Network error: Failed to connect to the server.");
          } else {
              alert(error.message);
          }
      } finally {
          const submitBtn = this.querySelector(".submit");
          submitBtn.disabled = false;
          submitBtn.textContent = "Sign In";
      }
  });

  // Close sign in form when clicking outside
  signInOverlay.addEventListener("click", (e) => {
      if (e.target === signInOverlay) {
          closeSignIn();
      }
  });

</script>
<script src="./script.js"></script>

aravsahni7 Sahni started this project — Apr 27, 2025 10:54 AM EDT

Leave feedback in the comments!