<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>$1</title>
<style>
body {
/* Light mode is the default, media queries handle dark mode switching. */
--foreground-color-light-mode: #444746;
--foreground-color-dark-mode: #C4C7C5;
--foreground-color: var(--foreground-color-light-mode);
--background-color-light-mode: #E1E3E1;
--background-color-dark-mode: #444746;
--background-color: var(--background-color-light-mode);
--icon-size-large: 48px;
--icon-size-small: 24px;
--link-text-color-light-mode: #0B57D0;
--link-text-color-dark-mode: #7CACF8;
--link-text-color: var(--link-text-color-light-mode);
margin: 0;
padding: 0;
background-color: var(--background-color);
}
#wrapper {
width: 100vw;
height: 100vh;
padding: 16px;
box-sizing: border-box;
display: grid;
place-items: center;
}
#content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.icon {
fill: var(--foreground-color);
}
#icon-large {
display: block;
width: var(--icon-size-large);
height: var(--icon-size-large);
}
#icon-small {
display: none;
width: var(--icon-size-small);
height: var(--icon-size-small);
}
#message {
font: 14px/20px Google Sans, Roboto, Arial, sans-serif;
text-align: center;
color: var(--foreground-color);
}
/* Media queries for resizing */
/* Note: while same as for Safe Browsing Quiet Interstitial */
/* ems are converted to px so that the same unit measure */
/* is used for everything */
/* Default size has large icon and visible text set up */
/* Medium size, small icon, no text */
@media (max-width: 280px) and (max-height: 168px),
(max-width: 168px) and (max-height: 280px),
(max-width: 75px),
(max-height: 75px) {
#icon-large {
display: none;
}
#icon-small {
display: block;
}
#message {
display: none;
}
#wrapper {
padding: 0;
}
}
/* Smallest size, no icon, no text */
@media (max-width: 30px),
(max-height: 30px) {
#icon-large,
#icon-small {
display: none;
}
}
@media (prefers-color-scheme: dark) {
body {
--foreground-color: var(--foreground-color-dark-mode);
--background-color: var(--background-color-dark-mode);
--link-text-color: var(--link-text-color-dark-mode);
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<svg id="icon-large" class="icon" viewBox="0 0 40 40">
<path d="M20 40C17.2333 40 14.6333 39.4833 12.2 38.45C9.76667 37.3833 7.65 35.95 5.85 34.15C4.05 32.35 2.61667 30.2333 1.55 27.8C0.516667 25.3667 1.19209e-07 22.7667 1.19209e-07 20C1.19209e-07 17.2333 0.516667 14.6333 1.55 12.2C2.61667 9.76666 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.63333 12.2 1.6C14.6333 0.533332 17.2333 -9.53674e-07 20 -9.53674e-07C22.7667 -9.53674e-07 25.3667 0.533332 27.8 1.6C30.2333 2.63333 32.35 4.05 34.15 5.85C35.95 7.65 37.3667 9.76666 38.4 12.2C39.4667 14.6333 40 17.2333 40 20C40 22.7667 39.4667 25.3667 38.4 27.8C37.3667 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3833 27.8 38.45C25.3667 39.4833 22.7667 40 20 40ZM20 37C22.0333 37 23.9833 36.6667 25.85 36C27.75 35.3 29.45 34.3 30.95 33L7 9.05C5.73333 10.5833 4.75 12.2833 4.05 14.15C3.35 16.0167 3 17.9667 3 20C3 24.7333 4.65 28.75 7.95 32.05C11.25 35.35 15.2667 37 20 37ZM32.95 30.95C34.1833 29.45 35.1667 27.7667 35.9 25.9C36.6333 24 37 22.0333 37 20C37 15.2667 35.35 11.25 32.05 7.95C28.75 4.65 24.7333 3 20 3C17.9667 3 16.0167 3.35 14.15 4.05C12.2833 4.75 10.5833 5.75 9.05 7.05L32.95 30.95Z">
</svg>
<svg id="icon-small" class="icon" viewBox="0 0 40 40" role="img">
<title>$1</title>
<path d="M20 40C17.2333 40 14.6333 39.4833 12.2 38.45C9.76667 37.3833 7.65 35.95 5.85 34.15C4.05 32.35 2.61667 30.2333 1.55 27.8C0.516667 25.3667 1.19209e-07 22.7667 1.19209e-07 20C1.19209e-07 17.2333 0.516667 14.6333 1.55 12.2C2.61667 9.76666 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.63333 12.2 1.6C14.6333 0.533332 17.2333 -9.53674e-07 20 -9.53674e-07C22.7667 -9.53674e-07 25.3667 0.533332 27.8 1.6C30.2333 2.63333 32.35 4.05 34.15 5.85C35.95 7.65 37.3667 9.76666 38.4 12.2C39.4667 14.6333 40 17.2333 40 20C40 22.7667 39.4667 25.3667 38.4 27.8C37.3667 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3833 27.8 38.45C25.3667 39.4833 22.7667 40 20 40ZM20 37C22.0333 37 23.9833 36.6667 25.85 36C27.75 35.3 29.45 34.3 30.95 33L7 9.05C5.73333 10.5833 4.75 12.2833 4.05 14.15C3.35 16.0167 3 17.9667 3 20C3 24.7333 4.65 28.75 7.95 32.05C11.25 35.35 15.2667 37 20 37ZM32.95 30.95C34.1833 29.45 35.1667 27.7667 35.9 25.9C36.6333 24 37 22.0333 37 20C37 15.2667 35.35 11.25 32.05 7.95C28.75 4.65 24.7333 3 20 3C17.9667 3 16.0167 3.35 14.15 4.05C12.2833 4.75 10.5833 5.75 9.05 7.05L32.95 30.95Z">
</svg>
<div id="message">$1</div>
</div>
</div>
</body>
</html>
Codebase Browser
chromium