gizmolang/index.html at main · elliottderosa/gizmolang · 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Dongle";
}

.sidenav {
  width: 150px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-left: 150px; /* Same width as the sidebar + left position in px */
  font-size: 18px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

.code {
  background-color: #EDECED;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">
  <a href="#Install">Install</a>
  <a href="#Output">Hello, Gizmo</a>
  <a href="#Variables">Variables</a>
  <a href="#Comments">Comments</a>
  <a href="#Loops">Loops</a>
</div>

<div class="main">
  <h2>The Gizmo Programming Language</h2>
  <h3>Install</h3>
  <p>Installing Gizmo from GitHub is simple.</p>
  <p>First, clone it from source.</p>
  <code class="code">
    git clone https://github.com/ELLDER054/rusty-gizmo.git
  </code>
  <p>Make sure you have <code>cargo</code> installed and up to date.</p>
  <p>Then, create the binary file.</p>
  <code>
    cargo install --path rusty-gizmo
  </code>
  <h3>Output</h3>
  <p>As always, the first step in learning a programming language is printing some kind of output to the screen.</p>
  <p>Gizmo has a feature that allows you to do this</p>
    <code class="code">
        write("Hello, Gizmo!");
    </code>
  <p>Entering this code into your Gizmo editor will print:</p>
    <samp>Hello, Gizmo!</samp>
  <p>Using this method, you can also print any data type (See the <a href="#Data_Types">data types section</a> for information on data types).</p>
  <p>For example, we can print either a number, a decimal number, or a character onto the screen</p>
    <code class="code">
      write(5); // A number, or an integer</br>
      write(10.67); // A decimal number</br>
      write('a'); // A character</br>
    </code>
</div>

</body>
</html>