Add first prototype index.html

2022-12-31 17:08:32 +01:00
parent 984a416ae7
commit d3f00e7268
1 changed files with 131 additions and 0 deletions
@@ -0,0 +1,131 @@
 <!DOCTYPE html>
 <html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
      html,
      body {
        background-color: #000;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: monospace;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .terminal {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        color: #fff;
        overflow-y: scroll;
        padding: 20px;
      }
      .prompt {
        color: #0f0;
      }
      .form {
        display: flex;
        width: 100vw;
        margin: 0 auto;
      }
      .input {
        background-color: transparent;
        border: none;
        color: #fff;
        outline: none;
        flex-grow: 1;
      }
      .input::placeholder {
        color: #666;
      }
      label {
        width: 100%;
        white-space: nowrap;
        display: inline-flex;
      }
      .terminal p,
      .prompt,
      .input {
        font-family: monospace;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function Terminal() {
        const [input, setInput] = React.useState("");
        const [output, setOutput] = React.useState([]);
        const outputRef = React.useRef(null);
        React.useEffect(() => {
          outputRef.current.scrollIntoView({ behaviour: "smooth" });
        }, [output]);
        function handleInput(event) {
          setInput(event.target.value);
        }
        function handleSubmit(event) {
          event.preventDefault();
          const result = executeCommand(input);
          setOutput([...output, { prompt: "❯", command: input }, { prompt: "", command: result }]);
          setInput("");
        }
        function executeCommand(command) {
          switch (command) {
            case "help":
              return "Available commands: help, date, ls";
            case "date":
              return new Date().toString();
            case "ls":
              return "file1.txt file2.txt file3.txt";
            default:
              return "Command not found";
          }
        }
        return (
          <div className="terminal">
            {output.map(({ prompt, command }, index) => (
              <p key={index}>{prompt && (<span className="prompt">&#x276f;&nbsp;</span>)}{command}</p>
            ))}
              <form onSubmit={handleSubmit}>
                <label>
                  <span className="prompt" ref={outputRef}>&#x276f;&nbsp;</span>
                  <input
                    type="text"
                    value={input}
                    onChange={handleInput}
                    className="input"
                    autoFocus
                  />
                </label>
              </form>
          </div>
        );
      }
      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<Terminal />);
    </script>
  </body>
 </html>