Console/terminal like faux input

Okay, there are two parts to this problem. Let's tackle them both indepdendently:

Part 1: looking like a terminal

You can absolutely pull this off with just HTML + CSS. Monospaced fonts, text-transform: uppercase, a little bit of layout, and creative use of an <input type="text"> or a <textarea> for the bit the user can type into will do it. You can even use e.g. a <datalist> to help "hint" the valid commands and allow "autocomplete".

I've thrown you together a CodePen to demonstrate how I'd start with it. For completeness, here's the code I wrote -

Relevant HTML:

Code

<!DOCTYPE html>
  <body>
    <main>
      <!-- here's the output and input; you can have as many as
           you like (but you probably only want one input!);
           note lack of indentation: WHITE SPACE MATTERS here! -->
      <output>You have logged in.

Please input page to recall:
Page(1)/Page(2)/List all (links)/(About) Me
      </output>
      <div id="prompt-wrapper">
        <input focus type="text" id="prompt" aria-label="Your command" list="valid-commands" placeholder="type your command here">
      </div>

      <!-- this bit makes "autocomplete" work! -->
      <datalist id="valid-commands">
        <option value="1"></option>
        <option value="2"></option>
        <option value="LINKS"></option>
        <option value="ABOUT"></option>
      </datalist>
    </main>
  </body>

CSS:

Code

* {
  box-sizing: border-box;
}

body {
  background: #ddd;
  color: #ddd;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  max-width: 480px;
  min-height: 360px;
  background: #000;
  border: 8px solid #000;
  text-transform: uppercase;
}

output {
  white-space: pre;
}

#prompt-wrapper {
  display: flex;
  &::before {
    content: '>';
    padding-right: 1em;
  }
}

#prompt {
  font: inherit;
  background: inherit;
  color: inherit;
  border: none;
  text-transform: inherit;
  width: 100%;

  &:focus {
    outline: none; /* this is bad for accessibility, but good for your design!? */
  }
}

Part 2: navigation

Pulling off navigation when the user enters something... that's a bit tougher. As far as I can see, you have two options:

1. Do it server side - wrap the <input> in a <form> which submits to a program running on your server (e.g. PHP code), which interprets what the user asked for and returns or redirects-to the relevant "next page", or something more-exotic (e.g. sending back JS that extends the existing page by removing the <input> and adding more <output>. This is a great approach... if you've got the ability to write server-side code like PHP on your server (often, free/cheap hosting doesn't allow this).

2. Do it in JS - I know you were trying to avoid this, but I can't see any other way to do a client-side translation from "what the user types onto the page" into "what page they go to next". I can keep thinking about it to see if I can find an "arcane" way (something to do with CSS [value=...] selectors, maybe?), but JS might be your easiest route. You'd probably be looking at either detecting [enter] in the input (or else wrapping it in a form and detecting the submit event) and then doing something with the value in the input.

Here's how I'd do it in JS: I'd have pages called things like 1.html, links.html, about.html, and my JS would take what you type in, put '.html' on the end of it, and attempt to fetch(...) it. If it's successful, it can either redirect to that URL or, better, just replace the contents of the page and update the address bar. If it 404s, it can output "invalid command, try again" or something. This approach means that you can even have e.g. secret pages where the command you need to type isn't obvious! It also minimises the amount of JS you have to deliver (e.g. you don't need to maintain a "list" of valid pages: you can just add new pages and they Just Work.)

I hope that provides a starting point. Shout if you want any help with any of the PHP or JS I've suggested.