<!DOCTYPE html>
<html>
    <head>
        <title>Qt WebEngine WebUI Example</title>
        <style>
         html {
             background: #f0f0f0;
             color: #303030;
             font: 16px system-ui;
             height: 100%;
         }

         body {
             margin: 0;
             padding: 0;
             height: 100%;
             display: flex;
             flex-direction: column;
             align-items: stretch;
         }

         body > * {
             padding-left: 20px;
             padding-right: 20px;
         }

         header {
             flex: none;
             display: flex;
             align-items: center;
             background: #f0fff0;
             border-bottom: 1px solid #e0e0e0;
             padding-top: 20px;
             padding-bottom: 20px;
         }

         header > h1 {
             font: bold 20px system-ui;
             margin-left: 18px;
         }

         main {
             flex: auto;
         }

         footer {
             flex: none;
             display: flex;
             justify-content: center;
             padding-bottom: 20px;
         }

         button {
             background: #41cd52;
             color: #f0f0f0;
             font: 16px system-ui;
             border: 0;
             box-shadow: 0px 1px 3px rgb(0,0,0,0.5);
             cursor: pointer;
             margin: 0 0 1px;
             padding: 10px 24px;
         }

         button:hover {
             background: #50dc61;
         }

         button:active {
             background: #50dc61;
             box-shadow: 0px 1px 2px rgb(0,0,0,0.5);
             margin: 1px 0 0;
         }

         button:focus {
             outline: 0;
         }

        </style>
    </head>
    <body>
        <header>
            <img width="48px" height="48px"
                 src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png">
            <h1>WebEngine Widgets<br>WebUI Example</h1>
        </header>
        <main>
            <p>
                Aside from the built-in schemes, such as <code>http</code> and
                <code>qrc</code>, Qt WebEngine may be extended with <em>custom
                schemes</em> by creating <em>custom scheme handlers</em>.
            </p>

            <p>
                This is a simple HTML page loaded from a custom scheme and
                displayed by a <code>QWebEngineView</code>. Even the Quit button
                below is a standard HTML <code>&lt;button&gt;</code> element.
            </p>

            <p>
                Read the documentation to find out
            </p>
            <ul>
                <li>
                    <p>
                        How to create a custom scheme handler which serves HTML
                        and handles HTML form submissions.
                    </p>
                </li>
                <li>
                    <p>
                        How to prevent ordinary web content from accessing the
                        custom scheme.
                    </p>
                </li>
                <li>
                    <p>
                        How to prevent any other scheme from submitting HTML
                        form data.
                    </p>
                </li>
            </ul>
        </main>
        <footer>
            <form action="" method="post">
                <button name="quit">Quit</button>
            </form>
        </footer>
    </body>
</html>