index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Tailwind CSS link -->
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />

    <!-- google font link-->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
      rel="stylesheet"
    />
    <title>Address Book</title>

    <!-- css link -->
    <link rel="stylesheet" href="style.css" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  </head>
  <body>
    <h1 class="text-4xl font-bold text-center my-8">
      GeoContact: Find Friends on the Fly
    </h1>

    <div class="max-w-4xl mx-auto my-4 p-4 bg-gray-100 rounded-lg shadow">
      <p class="text-lg">
        Welcome to GeoContact, the personalized address book with a geographical
        enhancement. In this application, the basic structure of an address book
        has been enriched with dynamic mapping capabilities. It’s no longer just
        about keeping contact details; now, the locations of friends are also
        pinpointed and visualized on an interactive map. This integration of
        contact information with geospatial data provides a comprehensive and
        connected overview of one's social network.
      </p>
    </div>

    <!-- Form to add new contact -->
    <form
      id="addContactForm"
      class="max-w-lg mx-auto my-8 p-4 bg-white rounded-lg shadow"
    >
      <div class="mb-4">
        <input
          type="text"
          id="fullName"
          placeholder="Full Name"
          required
          class="w-full p-2 border border-gray-300 rounded-lg"
        />
      </div>
      <div class="mb-4">
        <input
          type="email"
          id="email"
          placeholder="E-mail"
          required
          class="w-full p-2 border border-gray-300 rounded-lg"
        />
      </div>
      <div class="mb-4">
        <input
          type="number"
          id="phone-number"
          placeholder="Phone"
          required
          class="w-full p-2 border border-gray-300 rounded-lg"
        />
      </div>
      <button
        type="submit"
        id="addContactButton"
        disabled
        class="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600"
      >
        Add Contact
      </button>
    </form>

    <!-- Map -->
    <div
      id="map"
      class="mx-auto my-8 border border-gray-300 rounded-lg shadow"
      style="height: 25rem; width: 60rem"
    ></div>

    <script src="index.js"></script>
  </body>
</html>