aui-framework.github.io/index.html at main · aui-framework/aui-framework.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AUI Docs</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="google-site-verification" content="8Blgz2ng3UK7lc4StsQCe251EwWVB8o9nZeKQ2r_ACs" />
        <style>
            @font-face {
                font-family: "JetBrains Mono";
                src: url("/JetBrainsMono-Regular.woff2") format("woff2");
            }
            @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
            .btn {
                text-decoration: none;
                color: #222;
                background: #fff;
                padding: 3px 8px;
                border-radius: 4px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                font-size: 14pt;
                border: 1px solid #ddd;
                cursor: pointer;
                font-family: 'Montserrat', sans-serif;
            }
            .btn[default] {
                color: #fff;
                background: linear-gradient(#1c8fc9, #1564a1);
                border-color: #2ea5e0;
            }
            .btn[default]:hover {
                background: linear-gradient(#249ad5, #196cad);
            }
            .top {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 60%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .middle {
                text-align: center;
                position: absolute;
                top: 40%;
                left: 0;
                right: 0;
            }
            .code {
                font-family: "JetBrains Mono", monospace;
            }
            body {
                background: #222;
                transition: 1.0s;
            }
            #code-block {
                background: white;
                width: 10px;
                height: 18pt;
                display: inline-block;
                transition: 1s;
                opacity: 1;
                animation: blink-animation 1s infinite;
            }
            @keyframes blink-animation {
                to {
                    opacity: 0;
                }
            }
            h1 {
                font-size: 18pt;
                color: #fff;
            }
            .ignore-animation {
                opacity: 1 !important;
            }
        </style>
    </head>
    <body>
        <div class="top"><img src="https://aui-framework.github.io/develop/assets/logo.svg" style="width: 192px;"></div>
        <div class="middle">
            <h1 class="code"><span id="code-animation">W</span><div id="code-block" class="ignore-animation"></div></h1>
            <p>
                <a href="https://aui-framework.github.io/master/" class="btn" default>Latest version docs</a>
            </p>
            <p>
                <a href="https://aui-framework.github.io/develop/" class="btn">Develop branch docs</a>
            </p>
        </div>
        <script src="jquery.js"></script>


        <script>
            const str = "Write awesome modern applications with pure C++.";
            var charIndex = 0
            function setupTimeout() {
                setTimeout(function () {
                    $("#code-animation").html(str.substring(0, ++charIndex))
                    if (charIndex < str.length) {
                        setupTimeout();
                    } else {
                        $("#code-block").removeClass("ignore-animation");
                        $("#code-block").css("opacity", "");
                    }
                }, Math.floor(Math.random()) * 200 + 100);
            }
            setupTimeout();
        </script>
    </body>
</html>