index.ejs

<%- include('partials/header',{title:title}); %>

<h1 class="text-4xl font-bold dark:text-white py-8">
   <%= title %>
</h1>

<h2 class="text-3xl dark:text-white py-4">Examples</h2>
<div class="flex flex-wrap justify-between">
  <div class="my-4 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="/location">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Your location</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">This page uses a browser's geolocation capabilities to detect user's location. It will only work if you allow it.</p>
    <a href="/location" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Read more
      <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
  <div class="my-4 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="/from-northpole/6000">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Cities within 6000 km of the North Pole</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
      This page allows users to search for cities within a certain radius of the North Pole using data in the <a href="https://upstash.com/" class="text-blue-700 dark:text-blue-300 underline">Upstash</a> data store.</p>
    <a href="/from-northpole/6000" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Read more
      <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
  <div class="my-4 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="/nearby-cities/5000">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Nearby international cities</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
      This page utilizes browser's geolocation capabilities to detect the user's location and returns the nearby international cities within a specified radius from the <a href="https://upstash.com/" class="text-blue-700 dark:text-blue-300 underline">Upstash</a> data store.</p>
    <a href="/nearby-cities/5000" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Read more
      <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
  <div class="my-4 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="/nearby-us-cities/10000">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Nearby US cities</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
      This page utilizes browser's geolocation capabilities to detect the user's location and returns the nearby US cities within a specified radius from the <a href="https://upstash.com/" class="text-blue-700 dark:text-blue-300 underline">Upstash</a> data store.</p>
    <a href="/nearby-us-cities/10000" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Read more
      <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
  <div class="my-4 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="/around/-74/40/5000">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Nearby cities by coordinate and distance</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
      This page finds cities near a specific location using longitude, latitude coordinates, and distance in kilo meter.</p>
    <a href="/around/-74/40/5000" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Read more
      <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
</div>

<%- include('partials/footer'); %>