public/views/home.html

<!DOCTYPE html>
<html>
  <head>
    <title>Is It Spam?</title>
    <script src="https://unpkg.com/htmx.org@2.0.0"></script>

    <style>
      body, html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        flex-direction: column;
        padding: 2rem;
        gap: 3rem;
      }

      h1 {
        font-size: 2.5em;
        color: #333;
      }

      p {
        font-size: 1.2em;
        color: #666;
      }

      form {
        display: flex;
        align-items: center;
      }

      input[type="text"] {
        padding: 10px;
        font-size: 1em;
        width: 25vw;
        border: 1px solid #ccc;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }

      input:focus {
        outline: none;
      }

      button {
        padding: 10px 20px;
        font-size: 1em;
        color: #fff;
        background-color: #007bff;
        border: 1px solid #007bff;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        cursor: pointer;
      }

      button:hover {
        background-color: #0056b3;
      }

      .loading-bar {
            opacity: 0;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, transparent,
                #000, transparent,
                #000, transparent
            );
        }
    
        .htmx-request.loading-bar {
            opacity: 1;
            animation: fadeIn 2s linear forwards, slide 0.8s ease-in-out infinite;
        }
        @keyframes slide {
            0%   { transform: translateX(-100%); }
            100% { transform: translateX( 100%); }
        }
    
        @keyframes fadeIn {
            0%   { opacity: 0; }
            50%  { opacity: 0; }
            100% { opacity: 1; }
        }

      #summary {
        max-width: 50vw;
        background-color: #F8F8F8;
        padding: 1rem;
        border-radius: 10px;
      }

      #spam {
        background-color: #ff5050;
      }

      #not-spam {
        background-color: #40e27c;
      }
    </style>
  </head>

  <body hx-indicator=".loading-bar">
    {{if eq .isSpam "true"}}
    <h1 id="spam" style="font-size: 8rem;">LIKELY SPAM</h1>
    {{else}} {{if eq .isSpam "false"}}
    <h1 id="not-spam" style="font-size: 8rem;">NOT SPAM</h1>
    {{else}}
    <h1>Is It Spam?</h1>
    {{end}}{{end}}

    <form action="/lookup" method="post" hx-boost="true" hx-push-url="false">
      <input type="text" id="number" name="number" placeholder="Enter a phone number">
      <button>Lookup</button>
    </form>

    <div class="loading-bar"></div>
    
    {{ if .sum }}
    <p id="summary">{{ .sum }}</p>
    {{- end}}
  </body>
</html>