devtools-console/live-expressions.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console Live Expressions</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <style>
    h1 {
      text-align: center;
      margin: 1rem 0;
    }

    form {
      margin: 1rem;
      padding: .5rem;
      background: #FFF1;
      border-radius: 1rem;
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    form h2 {
      margin: 0;
      text-align: center;
    }

    .form-row {
      display: flex;
      gap: 1rem;
      margin: 0;
      border: 0;
    }

    .form-field {
      flex: 1;
    }

    label:not([for="tos"]) {
      font-weight: bold;
      display: block;
      padding-block-end: .5rem;
    }

    input:not(#tos) {
      background: #FFF2;
      border: 0;
      border-radius: .25rem;
      padding: .5rem;
      width: calc(100% - 1rem);
      color: white;
    }

    a {
      color: lime;
    }

    button {
      border: 0;
      border-radius: .25rem;
      background: white;
      color: black;
      font-weight: bold;
      padding: .5rem;
      width: 100%;
    }
  </style>
</head>

<body>
  <h1>Live Expressions demo</h1>

  <form id="sign-up-form">
    <h2>Sign up</h2>

    <fieldset class="form-row">
      <span class="form-field">
        <label for="name">Name</label>
        <input type="text" id="name">
      </span>
      <span class="form-field">
        <label for="username">Username</label>
        <input type="text" id="username">
      </span>
    </fieldset>

    <fieldset class="form-row">
      <span class="form-field">
        <label for="email">Email</label>
        <input type="text" id="email">
      </span>
    </fieldset>

    <fieldset class="form-row">
      <span class="form-field">
        <label for="password">Password</label>
        <input type="password" id="password">
      </span>
    </fieldset>

    <fieldset class="form-row">
      <span class="form-field">
        <input type="checkbox" id="tos">
        <label for="tos">I agree with the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label>
      </span>
    </fieldset>

    <fieldset class="form-row">
      <span class="form-field">
        <button type="submit">Create account</button>
      </span>
    </fieldset>
  </form>
</body>

</html>