356 lines
22 KiB
HTML
356 lines
22 KiB
HTML
<!doctype html>
|
||
<html class="no-js">
|
||
<head><meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
||
<link rel="index" title="Index" href="../genindex.html" /><link rel="search" title="Search" href="../search.html" /><link rel="next" title="UI Icons" href="ui-icons.html" /><link rel="prev" title="Pointer & Touch" href="pointer-touch.html" />
|
||
|
||
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
||
<title>Keyboard - GNOME Human Interface Guidelines documentation</title>
|
||
<link rel="stylesheet" type="text/css" href="../_static/pygments.css" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/styles/furo.css" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/styles/furo-extensions.css" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/gnome.css" />
|
||
|
||
|
||
|
||
<style>
|
||
:root {
|
||
--color-code-background: #f8f8f8;
|
||
--color-code-foreground: black;
|
||
--color-brand-primary: #4a86cf;
|
||
--color-brand-content: #4a86cf;
|
||
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-code-background: #202020;
|
||
--color-code-foreground: #d0d0d0;
|
||
|
||
}
|
||
}
|
||
|
||
/* For allowing end-user-specific overrides */
|
||
.override-light {
|
||
--color-code-background: #f8f8f8;
|
||
--color-code-foreground: black;
|
||
--color-brand-primary: #4a86cf;
|
||
--color-brand-content: #4a86cf;
|
||
|
||
}
|
||
.override-dark {
|
||
--color-code-background: #202020;
|
||
--color-code-foreground: #d0d0d0;
|
||
|
||
}
|
||
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../_static/pygments_dark.css"></head>
|
||
<body dir="">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||
<symbol id="svg-toc" viewBox="0 0 24 24">
|
||
<title>Contents</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<line x1="4" y1="6" x2="20" y2="6" />
|
||
<line x1="10" y1="12" x2="20" y2="12" />
|
||
<line x1="6" y1="18" x2="20" y2="18" />
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-menu" viewBox="0 0 24 24">
|
||
<title>Menu</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="feather feather-menu">
|
||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
||
<title>Expand</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="feather feather-chevron-right">
|
||
<polyline points="9 18 15 12 9 6"></polyline>
|
||
</svg>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
||
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
||
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
||
<label class="overlay toc-overlay" for="__toc"></label>
|
||
|
||
|
||
|
||
<div class="page">
|
||
<header class="mobile-header">
|
||
<div class="header-left">
|
||
<label class="nav-overlay-icon" for="__navigation">
|
||
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
||
</label>
|
||
</div>
|
||
<div class="header-center">
|
||
<a href="../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
||
</div>
|
||
<div class="header-right">
|
||
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
||
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
||
</label>
|
||
</div>
|
||
</header>
|
||
<aside class="sidebar-drawer">
|
||
<div class="sidebar-container">
|
||
|
||
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../index.html">
|
||
|
||
<div class="sidebar-logo-container">
|
||
<img class="sidebar-logo" src="../_static/logo.svg" alt="Logo"/>
|
||
</div>
|
||
|
||
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
||
|
||
</a><form class="sidebar-search-container" method="get" action="../search.html">
|
||
<input class="sidebar-search" placeholder=Search name="q">
|
||
<input type="hidden" name="check_keywords" value="yes">
|
||
<input type="hidden" name="area" value="default">
|
||
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
||
<ul class="current">
|
||
<li class="toctree-l1"><a class="reference internal" href="../principles.html">Design Principles</a></li>
|
||
<li class="toctree-l1"><a class="reference internal" href="../resources.html">Tools & Resources</a></li>
|
||
<li class="toctree-l1 current has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
||
<li class="toctree-l2"><a class="reference internal" href="app-naming.html">App Naming</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="app-icons.html">App Icons</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="pointer-touch.html">Pointer & Touch</a></li>
|
||
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Keyboard</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="ui-icons.html">UI Icons</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="ui-styling.html">UI Styling</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="writing-style.html">Writing Style</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="typography.html">Typography</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="navigation.html">Navigation</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="adaptive.html">Scaling & Adaptiveness</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="accessibility.html">Accessibility</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1 has-children"><a class="reference internal" href="../patterns.html">Patterns</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/windows.html">Windows</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/header-bars.html">Header Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/popovers.html">Popovers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/utility-panes.html">Utility Panes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/boxed-lists.html">Boxed Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/grid-views.html">Grid Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/list-column-views.html">List & Column Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/selection-mode.html">Selection & Edit Modes</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/browsing.html">Browsing</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/view-switchers.html">View Switchers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/tabs.html">Tabs</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/sidebars.html">Sidebars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/search.html">Search</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/buttons.html">Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/menus.html">Menus</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/switches.html">Switches</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/text-fields.html">Text Fields</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/checkboxes.html">Checkboxes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/radio-buttons.html">Radio Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/drop-downs.html">Drop-Down Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/sliders.html">Sliders</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/spin-buttons.html">Spin Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/overlaid.html">Overlaid Controls</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/notifications.html">Notifications</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/toasts.html">Toasts</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/info-bars.html">Info Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/progress-bars.html">Progress Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/spinners.html">Spinners</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/dialogs.html">Dialogs</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/placeholders.html">Placeholder Pages</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/tooltips.html">Tooltips</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1 has-children"><a class="reference internal" href="../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l2"><a class="reference internal" href="../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../reference/palette.html">Palette</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../reference/backgrounds.html">Backgrounds</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
<main class="main">
|
||
<div class="content">
|
||
<article role="main">
|
||
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
||
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
||
</label>
|
||
<section id="keyboard">
|
||
<h1>Keyboard<a class="headerlink" href="#keyboard" title="Permalink to this headline">¶</a></h1>
|
||
<p>Keyboard interaction covers a range of behaviors, from text entry and shortcuts, through to the keyboard being used as the sole input device. The latter is vital for visually-impaired people or those with mobility impairments.</p>
|
||
<p>While many aspects of keyboard interaction are relevant to accessibility, some users prefer to use the keyboard and it can be an efficient alternative to pointer-based interaction.</p>
|
||
<p>Just as it should be possible to perform every action with a pointing device, so every action should also be possible with the keyboard. Most of the time, this is easy to achieve with the standard keyboard features described below. However, some operations — like drag-and-drop — may require more thought.</p>
|
||
<p>Test how accessible your app is by trying to use it with just a keyboard.</p>
|
||
<section id="shortcut-keys">
|
||
<span id="id1"></span><h2>Shortcut Keys<a class="headerlink" href="#shortcut-keys" title="Permalink to this headline">¶</a></h2>
|
||
<p>Use the <a class="reference internal" href="../reference/keyboard.html"><span class="doc">standard GNOME shortcut keys</span></a> if your application supports those functions. This ensures consistency between GNOME applications and aids discoverability.</p>
|
||
<p>Shortcut keys should also be assigned to the most commonly-used actions in your application. However, don’t assign shortcuts for everything.</p>
|
||
<p>When assigning non-standard shortcuts in your application:</p>
|
||
<ul class="simple">
|
||
<li><p>Try to use Ctrl in combination with a letter.</p></li>
|
||
<li><p>Shift+Ctrl and a letter is the recommended pattern for shortcuts that reverse or extend another function. For example, Ctrl+Z is the shortcut for undo, and Shift+Ctrl+Z is the shortcut for redo.</p></li>
|
||
<li><p>Shortcuts should be as mnemonic as possible, as this makes them easier to learn and remember. For example, Ctrl+E would be a good shortcut for an edit action.</p></li>
|
||
<li><p>Do not use Alt for shortcut keys, as this may conflict with access keys.</p></li>
|
||
<li><p>GNOME reserves the use of the Super key for use in system shortcuts. Super should therefore not be used by applications. Additional <a class="reference internal" href="../reference/keyboard.html#legacy-shortcuts"><span class="std std-ref">legacy system shortcuts</span></a> should also be avoided by apps.</p></li>
|
||
<li><p>Don’t assign awkward reaches. Some people may only be able to use one hand on the keyboard, so shortcuts that can be easily used with one hand are preferable for common operations. (This guideline also applies to access keys below.)</p></li>
|
||
</ul>
|
||
<p>The technical term for shortcut keys is <em>accelerators</em>.</p>
|
||
</section>
|
||
<section id="access-keys">
|
||
<span id="id2"></span><h2>Access Keys<a class="headerlink" href="#access-keys" title="Permalink to this headline">¶</a></h2>
|
||
<p>Access keys allow someone to operate labelled controls by holding Alt in combination with another key. These are indicated by an underlined letter within each control label (this is displayed when Alt is held down). As far as possible, all labelled components should have an access key.</p>
|
||
<p>Guidelines for selecting access keys:</p>
|
||
<ul class="simple">
|
||
<li><p>Choose access keys that are easy to remember. Normally this means using the first letter of the label. If the label has more than one word, the first letter of one of its other words can also be used. Additionally, if another letter provides a better association (for example: “x” in “Extra Large”) , consider using that letter instead.</p></li>
|
||
<li><p>Avoid assigning access keys to “thin” letters (such as lowercase i or l), or letters with descenders (such as lowercase g or y), unless it is unavoidable. The underline is sometimes not as clear with these characters.</p></li>
|
||
<li><p>If it is difficult to assign access keys to all labelled controls, assign access keys to the most frequently-used controls first. If the first letter is not available, choose an easy to remember consonant from the label, for example, “p” in “Replace”. Only assign vowels once no consonants are available.</p></li>
|
||
<li><p>Be aware that access keys have to be translated together with the strings that they are taken from, so even if there are no conflicts in your native language, they may occur in translations.</p></li>
|
||
</ul>
|
||
<p>The technical term for access keys is <em>mnemonics</em>.</p>
|
||
</section>
|
||
<section id="keyboard-navigation">
|
||
<span id="keyboard-nav"></span><h2>Keyboard Navigation<a class="headerlink" href="#keyboard-navigation" title="Permalink to this headline">¶</a></h2>
|
||
<p>It should be possible to move around and interact with every part of your user interface using the keyboard. This is primarily done with the tab key, which moves through each UI element in sequence.</p>
|
||
<p>The keyboard focus sequence follows the internal widget tree, and is usually logically structured by default. However, you should test to make sure that the focus order is logical and traverses each UI element.</p>
|
||
<p>Other guidelines for keyboard navigation:</p>
|
||
<ul class="simple">
|
||
<li><p>When possible, play the alert sound when tab fails to move keyboard focus. For example, when the focus is on the first character in a text field and the user presses left arrow key, or when the user tries to perform multiple selection in a single selection dialog.</p></li>
|
||
<li><p>Control labels should immediately precede their control in the keyboard focus order. This will ensure that the access key you assign to the label will move focus to or activate the control.</p></li>
|
||
<li><p>Where possible, arrow keys should allow moving around the UI in a directional fashion.</p></li>
|
||
</ul>
|
||
<section id="standard-navigation-keys">
|
||
<h3>Standard Navigation Keys<a class="headerlink" href="#standard-navigation-keys" title="Permalink to this headline">¶</a></h3>
|
||
<p>The following keys should automatically work for the majority of GNOME user interface elements. However, it is recommended to test to ensure that they do work correctly. Custom UI should support the standard navigation keys.</p>
|
||
<div class="table-wrapper"><table class="colwidths-given docutils align-default">
|
||
<colgroup>
|
||
<col style="width: 10%"/>
|
||
<col style="width: 90%"/>
|
||
</colgroup>
|
||
<thead>
|
||
<tr class="row-odd"><th class="head"><p>Keys</p></th>
|
||
<th class="head"><p>Function</p></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="row-even"><td><p>Tab</p></td>
|
||
<td><p>Move keyboard focus to the next control</p></td>
|
||
</tr>
|
||
<tr class="row-odd"><td><p>Shift+Tab</p></td>
|
||
<td><p>Move keyboard focus to the previous control</p></td>
|
||
</tr>
|
||
<tr class="row-even"><td><p>Ctrl+Tab</p></td>
|
||
<td><p>Move keyboard focus to the next control, when Tab has another function (this is primarily relevant to text entries)</p></td>
|
||
</tr>
|
||
<tr class="row-odd"><td><p>Shift+Ctrl+Tab</p></td>
|
||
<td><p>Move keyboard focus to the previous control, when Tab has another function</p></td>
|
||
</tr>
|
||
<tr class="row-even"><td><p>Return</p></td>
|
||
<td><p>Activate the focused control or content item</p></td>
|
||
</tr>
|
||
<tr class="row-odd"><td><p>Space</p></td>
|
||
<td><p>Toggle the state of a control</p></td>
|
||
</tr>
|
||
<tr class="row-even"><td><p>F10</p></td>
|
||
<td><p>Open primary or secondary menu</p></td>
|
||
</tr>
|
||
<tr class="row-odd"><td><p>Menu / Shift+F10</p></td>
|
||
<td><p>Open context menu for focused location</p></td>
|
||
</tr>
|
||
<tr class="row-even"><td><p>Esc</p></td>
|
||
<td><p>Close the current container, if it is transient (applies to menus, popovers and dialogs)</p></td>
|
||
</tr>
|
||
</tbody>
|
||
</table></div>
|
||
</section>
|
||
</section>
|
||
</section>
|
||
|
||
</article>
|
||
<footer>
|
||
|
||
<div class="related-pages">
|
||
<a class="next-page" href="ui-icons.html">
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Next</span>
|
||
</div>
|
||
<div class="title">UI Icons</div>
|
||
</div>
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
</a>
|
||
<a class="prev-page" href="pointer-touch.html">
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Previous</span>
|
||
</div>
|
||
|
||
<div class="title">Pointer & Touch</div>
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
</footer>
|
||
</div>
|
||
<aside class="toc-drawer">
|
||
|
||
|
||
<div class="toc-sticky toc-scroll">
|
||
<div class="toc-title-container">
|
||
<span class="toc-title">
|
||
Contents
|
||
</span>
|
||
</div>
|
||
<div class="toc-tree-container">
|
||
<div class="toc-tree">
|
||
<ul>
|
||
<li><a class="reference internal" href="#">Keyboard</a><ul>
|
||
<li><a class="reference internal" href="#shortcut-keys">Shortcut Keys</a></li>
|
||
<li><a class="reference internal" href="#access-keys">Access Keys</a></li>
|
||
<li><a class="reference internal" href="#keyboard-navigation">Keyboard Navigation</a><ul>
|
||
<li><a class="reference internal" href="#standard-navigation-keys">Standard Navigation Keys</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</aside>
|
||
</main>
|
||
</div><script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
|
||
<script src="../_static/jquery.js"></script>
|
||
<script src="../_static/underscore.js"></script>
|
||
<script src="../_static/doctools.js"></script>
|
||
<script src="../_static/scripts/main.js"></script>
|
||
</body>
|
||
</html> |