122 lines
3.9 KiB
HTML
122 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta charset="UTF-8" />
|
||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
|
||
<meta
|
||
name="viewport"
|
||
content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
|
||
|
||
<title>Document Test</title>
|
||
|
||
<link rel="icon" href="/img/favicon.ico" sizes="any" />
|
||
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png" />
|
||
|
||
<link rel="manifest" href="/manifest.json" />
|
||
|
||
<meta
|
||
name="theme-color"
|
||
content="#e5e5df"
|
||
media="(prefers-color-scheme: light)" />
|
||
<meta
|
||
name="theme-color"
|
||
content="#252523"
|
||
media="(prefers-color-scheme: dark)" />
|
||
|
||
<!-- Конфигурация SW -->
|
||
<script src="/sw.js"></script>
|
||
|
||
<link rel="stylesheet" href="/css/main.css" />
|
||
</head>
|
||
<body>
|
||
<style>
|
||
.test {
|
||
padding: 20px;
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.test label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
justify-content: space-between;
|
||
}
|
||
</style>
|
||
<div class="test">
|
||
<details open>
|
||
<summary>What does <code>:open</code> do?</summary>
|
||
<p>The <code>:open</code> pseudo-class matches when certain
|
||
elements
|
||
are in an open state.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Which elements support it?</summary>
|
||
<p>It works with <code><details></code>,
|
||
<code><dialog></code>, <code><select></code>,
|
||
and
|
||
<code><input></code> elements like <code>date</code>
|
||
and
|
||
<code>color</code>.</p>
|
||
</details>
|
||
|
||
<label>
|
||
<code>hanging-punctuation: first last</code>
|
||
<input type="checkbox" switch checked class="hang-toggle">
|
||
</label>
|
||
<label>
|
||
Show guide
|
||
<input type="checkbox" switch class="guide-toggle">
|
||
</label>
|
||
|
||
<div popover="hint" id="tooltip">
|
||
This tooltip won’t close the menu!
|
||
</div>
|
||
|
||
<button popovertarget="my-cool-popover">Открыть всплывающее
|
||
окно</button>
|
||
|
||
<div id="my-cool-popover" popover>
|
||
<h3>Привет, я Popover! 👋</h3>
|
||
<p>Я открылся без единой строчки JavaScript.</p>
|
||
|
||
<button popovertarget="my-cool-popover"
|
||
popovertargetaction="hide">Закрыть</button>
|
||
</div>
|
||
|
||
<div class="example">
|
||
<h3><dialog></h3>
|
||
<button id="open-dialog"
|
||
onclick="document.getElementById('demo-dialog').showModal()">Open
|
||
dialog</button>
|
||
|
||
<dialog id="demo-dialog">
|
||
<h4>This dialog matches <code>:open</code></h4>
|
||
<p>While showing, the dialog is styled using the
|
||
<code>:open</code>
|
||
pseudo-class.</p>
|
||
|
||
<button
|
||
onclick="navigator.setAppBadge(2);document.getElementById('demo-dialog').close()">Badge</button>
|
||
|
||
<button id="close-dialog"
|
||
onclick="document.getElementById('demo-dialog').close()">Close</button>
|
||
</dialog>
|
||
</div>
|
||
</div>
|
||
|
||
<br><br>
|
||
|
||
<a href="/faceid.html">Face ID</a>
|
||
|
||
<br><br>
|
||
|
||
<a href="/qr.html">QR Code Scanner</a>
|
||
|
||
<br><br>
|
||
|
||
<a href="/">Go back</a>
|
||
</body>
|
||
</html> |