chromium/chrome/browser/resources/chromeos/parent_access/parent_access_before.html

<style include="cros-color-overrides">
  #action-button,
  #action-button-jelly {
    margin-inline-start: 8px;
  }

  #before-screen {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    padding: 26px 24px 20px;
  }

  #before-screen-buttons,
  #before-screen-buttons-jelly {
    display: flex;
    /* Allows the button that appears first visually to be last in tab order */
    flex-direction: row-reverse;
    margin-top: auto; /* position at end of flexbox */
    width: 100%;
  }

  #illustration {
    height: 96px;
    width: 96px;
  }
  /* Hide pre-existing buttons and show Jelly buttons if Jelly is enabled. */
  /* TODO (b/297564545): Clean up Jelly flag logic after Jelly is enabled. */
  :host-context(body.jelly-enabled) #before-screen-buttons {
    display: none;
  }

  :host-context(body:not(.jelly-enabled)) #before-screen-buttons-jelly {
    display: none;
  }
</style>

<parent-access-template>
  <span slot="main">
    <div id="before-screen">
      <picture>
        <source srcset="images/request_approval_dark.svg"
            media="(prefers-color-scheme: dark)">
        <img src="images/request_approval.svg" id="illustration" alt="">
      </picture>
      <div id="before-screen-body" aria-live="polite"></div>
      <div id="before-screen-buttons">
        <cr-button class="action-button" id="action-button"
          on-click="showParentAccessUi">
          $i18n{askInPersonButtonText}
        </cr-button>
      </div>
      <div id="before-screen-buttons-jelly">
        <cros-button
          button-style="primary"
          label="$i18n{askInPersonButtonText}"
          id="action-button-jelly"
          on-click="showParentAccessUi">
        </cros-button>
      </div>
    </div>
  </span>
</parent-access-template>