chromium/components/supervised_user/core/browser/resources/supervised_user_block_interstitial_v2.html

<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<meta name="viewport"
    content="initial-scale=1, minimum-scale=1, width=device-width, interactive-widget=resizes-content">
    <!-- TODO(crbug.com/40250276): Once fixed, "interactive-widget=resizes-content" can be removed. -->
<title>$i18n{blockPageTitle}</title>
<link rel="stylesheet" href="../../../../../components/security_interstitials/core/common/resources/interstitial_core.css">
<link rel="stylesheet" href="supervised_user_block_interstitial_v2.css">
<script src="supervised_user_block_interstitial_v2.js"></script>
</head>
<body class="supervised-user-block">
<div class="frame-blocked" id="frame-blocked" tabindex="-1">
  <div class="message-container">
    <div class="banner" id="banner">
      <!-- Icon is from go/gm3-family-link-icon (Googler-only) -->
      <svg id="family-link-kite-icon" xmlns="http://www.w3.org/2000/svg" focusable="false"
      height="20" viewBox="0 -960 960 960" width="20" fill="#5F6368">
        <path d="m500-225 260-360-260-253-260 253 260 360ZM390-40q-51
             0-90.5-30.5T246-149q-6-23-25.5-37T178-200q-16 0-30
             6.5T124-175l-61-51q21-26 51-40t64-14q51 0 91 30.5t54 78.5q6 23 25 37t42
             14q20 0 36-9.5t25-26.5L175-538q-17-24-14.5-53.5T184-642l263-256q11-11
             25-16.5t28-5.5q14 0 28 5.5t25 16.5l263 256q21 20 23.5
             50T825-538L520-116q-20 35-54 55.5T390-40Zm110-492Z">
      </svg>
      <div id="banner-message">
        <p class="banner-header">$i18n{bannerTitle}</p>
        <p class="banner-content"> $i18n{bannerMessage}</p>
      </div>
    </div>
    <picture id="error-page-illustration">
      <source
        srcset="error_page_illustration_dark_theme.svg"
        media="(prefers-color-scheme: dark)"
        alt="">
      <img class="illustration"
        src="error_page_illustration_light_theme.svg"
        alt="">
    </picture>
    <picture id="waiting-for-approval-illustration" hidden>
      <source
        srcset="waiting_for_approval_dark_theme.svg"
        media="(prefers-color-scheme: dark)"
        alt="">
      <img class="illustration"
        src="waiting_for_approval_light_theme.svg"
        alt="">
    </picture>
    <div id="main-message">
      <h1 id="block-page-header" tabindex="-1">$i18n{blockPageHeader}</h1>
      <p id="block-page-message" tabindex="-1">$i18n{blockPageMessage}</p>
      <h1 id="request-failed-message" tabindex="-1" aria-live="assertive" aria-atomic="true" hidden>$i18n{requestFailedMessage}</h1>
      <h1 id="request-sent-message" tabindex="-1" aria-live="assertive" aria-atomic="true" hidden>$i18n{requestSentMessage}</h1>
      <p id="request-sent-description" tabindex="-1" hidden>$i18n{requestSentDescription}</p>
    </div>
    <div id="block-reason-container">
      <p id="block-reason-show-details-link" tabindex="-1">$i18n{showDetailsLink}</p>
      <p id="block-reason-hide-details-link" tabindex="-1">$i18n{hideDetailsLink}</p>
      <div id="block-reason">
        <div>
          <h2 id="block-reason-header">$i18n{siteBlockHeader}</h2>
          <p id="block-reason-message">$i18n{blockReasonMessage}</p>
        </div>
      </div>
    </div>
    <div id="custodians-information" hidden>
      <div id="custodian-information" class="custodian-information">
        <img id="custodian-avatar-img" class="avatar-img" alt="">
        <div id="custodian-contact" class="custodian-contact">
          <div id="custodian-name" tabindex="-1" class="custodian-name"></div>
          <div id="custodian-email" tabindex="-1" class="custodian-email"></div>
        </div>
      </div>
      <div id="second-custodian-information" class="custodian-information" hidden>
        <img id="second-custodian-avatar-img" class="avatar-img" hidden alt="">
        <div id="second-custodian-contact" class="custodian-contact">
          <div id="second-custodian-name" tabindex="-1" class="custodian-name"></div>
          <div id="second-custodian-email"  tabindex="-1" class="custodian-email"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container">
    <button id="back-button" class="go-back-button" hidden>
      $i18n{backButton}
    </button>
    <button id="local-approvals-button" class="local-approvals-button" hidden>
      $i18n{localApprovalsButton}
    </button>
    <button id="local-approvals-remote-request-sent-button" class="local-approvals-button" hidden>
      $i18n{localApprovalsRemoteRequestSentButton}
    </button>
    <button id="remote-approvals-button" class="remote-approvals-button" hidden>
      $i18n{remoteApprovalsButton}
    </button>
    <div id="details-button-container">
      <button id="show-details-link" class="details-button small-link" hidden>
        $i18n{showDetailsLink}
      </button>
      <button id="hide-details-link" class="details-button small-link" hidden>
        $i18n{hideDetailsLink}
      </button>
    </div>
  </div>
  <div id="details" hidden>
    <p id="details-header" role="alert" >$i18n{blockReasonHeader}</p>
  </div>
</div>
</body>
</html>