views/index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>🖨️WebPage2PDF</title>
    <style>
        body {
          background:#0f0c29;
          box-sizing: border-box;
          margin: 10% 0;
          padding: 0;
          display: flex;
          justify-content: center;
        }
        div {
          background: #0f0c29;  /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
          border-radius: 20px;
          width: 800px;
          height: 350px;
          box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.5);
        }
        h1 {
          text-align: center;
          font-family: 'Courier New', Courier, monospace;
          margin-bottom: 10px;
          color: rgb(255, 255, 255);
        }
        h2 {
          text-align: center;
          font-family: 'Courier New', Courier, monospace;
          margin-bottom: 70px;
          color: rgb(255, 255, 255);
        }
        input {
          display: block;
          margin: 0 auto;
          border: none;
          outline: none;
          height: 30px;
          width: 350px;
          border-radius: 5px;
        }
        button {
          display: block;
          margin: 30px auto;
          background: rgb(0, 0, 0);
          border: none;
          height: 40px;
          width: auto;
          border-radius: 5px;
          font-size: large;
          color: white;
          padding: 0 20px;
          outline: none;
        }
        button:hover {
          filter: brightness(80%);
          background: rgb(255, 255, 255);
          color: black;
          font-weight: bold;
        }
    </style>
  </head>
  <body>
    <div>
      <h1>📑WebPage2PDF🖨️</h1>
      <h2>Transform your WebPage into a PDF file</h2>
      <form id="form">
        <label for="url"></label>
        <input
          type="text"
          id="url"
          placeholder="Enter page url"
          name="pageUrl"
        />
        <button type="submit">Generate PDF ✔️ </button>
      </form>
    </div>

    <script>
      const form = document.getElementById('form');
      const url = document.getElementById('url');
      const sendRequest = (e) => {
        e.preventDefault();
        window.location = `${window.location.href}pdf?target=${url.value}`;
      };
      // Event Listener
      form.addEventListener('submit', sendRequest);
    </script>
  </body>
</html>