web/index.html at main · Commander-Language/web · 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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="style.css">
        <title>Commander</title>
    </head>
    <body>

        <div class="banner">
            <a href="./" class="noHover"><img src="imgs/commander_logo.png" alt="The Commander
                Logo" class="logo"></a>
            <a href="./" class="active">About</a>
            <a href="./team.html">The Team</a>
            <a href="./download.html">Download</a>
            <a href="./tutorial.html">Tutorial</a>
        </div>

        <div class="banner-mobile">
            <a href="./" class="noHover"><img src="imgs/commander_logo_short.png" alt="The Commander
                Logo" class="logo-mobile"></a>

            <div class="drop-down">
                <button class="drop-down-button" onclick="myFunction()">Menu</button>
                <div id="dropdown" class="drop-down-content">
                    <a href="./">About</a>
                    <a href="./team.html">The Team</a>
                    <a href="./download.html">Download</a>
                    <a href="./tutorial.html">Tutorial</a>
                </div>
            </div>
        </div>

        <div class="content">
            <h1>What is Commander?</h1>
            <img src="imgs/hello_from_commander.gif" style="max-width: 100%; height: auto;"><br>
            <p class="content-p">
            Commander is powerful scripting language that helps you automate
            the command-line, manipulate data, and control your system using
            friendlier syntax than other scripting languages, like Bash or
            PowerShell. The interpreter includes a shell-like environment
            called a REPL (Read Evaluate Print Loop), Bash/PowerShell
            transiplers, and the ability to run Commander files. For debugging,
            we included flags to the interpreter to print out the structure of the Abstract Syntax
            <br>
            </p>
            <h1>Compared To Similar Languages</h1>
            <p class="content-p">
            One of the main reasons for the creation of this project is how
            unintuitive scripting languages like Bash are for newcomers. Let's
            take if statements as an example.
            <br><br>
            </p>
            <div style="display: flex; flex-direction: row; justify-content: center;">
                <img src="imgs/if_commander.png" style="height: auto; max-width:
                40%; padding-right: 2.5%; object-fit: contain;">
                <img src="imgs/if_bash.png" style="height: auto; max-width: 40%;
                padding-left: 2.5%; object-fit: contain;">
            </div>
            <p class="content-p">
            <br>
            Line #2 can already be confusing for beginners because the spacing
            between the equals sign, variable names, and value matters! You
            don't have to worry about that in Commander.
            </p>
            <h1>Project Archeticture</h1>
            <p class="content-p">
            Here is the project architecture for the project<br><br>
            </p>
            <div style="display: flex; flex-direction: column; align-items: center;">
                <img src="imgs/pipeline1.png" style="height: auto; width: 100%;
                padding-bottom: 40px; max-width: 800px;">
                <img src="imgs/pipeline2.png" style="height: auto; width: 100%;
                padding-top: 40px; max-width: 800px;">
            </div>
        </div>
        <script>
            /* When the user clicks on the button,
            toggle between hiding and showing the dropdown content */
                function myFunction() {
                    document.getElementById("dropdown").classList.toggle("show");
                }

            // Close the dropdown menu if the user clicks outside of it
            window.onclick = function(event) {
                if (!event.target.matches('.drop-down-button')) {
                    var dropdowns = document.getElementsByClassName("drop-down-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
            }
        </script>
    </body>
</html>