views/index.html

<!DOCTYPE html>
<html lang="en"> <!-- Can replace with your own locale -->
<head>
  <!-- Compatability -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- Title and Description -->
  <title>URL Shortener</title>
  <meta name="description" content="An easy way to share links with others.">
  <meta name="author" content="python660">

  <!-- Social media -->
  <meta property="og:title" content="URL Shortener">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://replit.com/@python660">
  <meta property="og:description" content="An easy way to share links with others.">
  <meta property="og:image" content="preview.png">

  <!-- Preconnect to certain useful domains as needed -->
  <!--link rel="preconnect" href="https://cdnjs.cloudflare.com"-->

  <!-- Favicons and icons -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Link your CSS up here -->
  <link rel="stylesheet" href="/public/style.css">
</head>
<body>
  <!-- Website Content -->
  <h1>URL Shortener Service</h1>
  <section>
    <form action="api/shorturl" method="POST">
      <fieldset>
        <legend>URL Shortener</legend>
        <label for="url_input">URL:</label>
        <input id="url_input" type="text" name="url" placeholder="https://www.google.com/" />
        <input type="submit" value="SHORTEN" />
      </fieldset>
    </form>
  </section>

  <!-- Javascript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!--script src="script.js"></script-->
</body>
</html>