about.html Example File

webenginewidgets/webui/about.html
<!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>

© 2018 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.