SimpleScript/index.html at Pro123 · ProgrammerKR/SimpleScript · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SimpleScript Language</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <!-- CodeMirror CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/monokai.min.css">

  <!-- CodeMirror JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/javascript/javascript.min.js"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="100" tabindex="0">

  <nav id="mainNav" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">SimpleScript</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#keywords">Keywords</a></li>
          <li class="nav-item"><a class="nav-link" href="#datatypes">Data Types</a></li>
          <li class="nav-item"><a class="nav-link" href="#functions">Functions</a></li>
          <li class="nav-item"><a class="nav-link" href="#syntax">Syntax</a></li>
          <li class="nav-item"><a class="nav-link" href="#examples">Examples</a></li>
          <li class="nav-item"><a class="nav-link" href="#try">Try It</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="text-black text-center">
    <div class="container">
      <h1 class="display-4 text-success fw-bold">Welcome to SimpleScript</h1>
      <p class="lead">A beginner-friendly and powerful scripting language</p>
    </div>
  </header>

  <main class="container my-5">
    <section id="home" class="mb-5">
      <h2 class="text-center">Introduction</h2>
        <br>
      <p class="text-center">SimpleScript is a beginner-friendly scripting language designed for ease, power, and readability. Whether you are new to programming or an experienced developer, SimpleScript offers features to streamline your workflow.</p>
        <br><hr><br>
      <h4 class="text-center">Why Choose SimpleScript?</h4>
      <ul>
        <li><strong>Ease of Use:</strong> Simple syntax and structure.</li>
        <li><strong>Versatility:</strong> Automate tasks or build web tools.</li>
        <li><strong>Powerful Features:</strong> Built-in functions and flexible structures.</li>
        <li><strong>Active Community:</strong> Share, learn, and grow.</li>
      </ul>
    </section>
      <hr>
    <section id="keywords" class="mb-5 text-center">
      <h2 class="text-center">Keywords</h2>
      <p class="text-center">These are reserved words used in SimpleScript for program structure and logic.</p>
      <div class="row row-cols-2 row-cols-md-3 g-3">
        <div class="col"><strong>let</strong>: Declare a variable</div>
        <div class="col"><strong>print</strong>: Output a value</div>
        <div class="col"><strong>if / then / endif</strong>: Conditional logic</div>
        <div class="col"><strong>for / to / do / endfor</strong>: Looping from one value to another</div>
        <div class="col"><strong>while / do / endwhile</strong>: Loop while a condition is true</div>
        <div class="col"><strong>input</strong>: Take user input</div>
        <div class="col"><strong>function / endfunction</strong>: Define a function</div>
        <div class="col"><strong>call</strong>: Call a function</div>
        <div class="col"><strong>return</strong>: Return a value from a function</div>
        <div class="col"><strong>break / continue</strong>: Loop control</div>
        <div class="col"><strong>and / or / not</strong>: Logical operators</div>
      </div>
    </section>
      <hr>
    <section id="datatypes" class="mb-5 text-center">
      <h2 class="text-center">Data Types</h2>
      <ul>
        <li><strong>Number</strong>: e.g., 10, 3.14</li>
        <li><strong>String</strong>: e.g., "Hello, World"</li>
        <li><strong>Boolean</strong>: <code>true</code> or <code>false</code></li>
        <li><strong>Null</strong>: Represents no value</li>
        <li><strong>List</strong>: Arrays like [1, 2, 3]</li>
      </ul>
    </section>
      <hr>
    <section id="functions" class="mb-5 text-center">
      <h2 class="text-center">Built-in Functions</h2>
      <div class="row row-cols-2 row-cols-md-3 g-3">
        <div class="col"><code>len(list)</code>: Length of list</div>
        <div class="col"><code>push(list, value)</code>: Add to end</div>
        <div class="col"><code>pop(list)</code>: Remove last item</div>
        <div class="col"><code>join(list, sep)</code>: Join into string</div>
        <div class="col"><code>split(str, sep)</code>: Convert to list</div>
        <div class="col"><code>reverse(list)</code>: Reverse items</div>
        <div class="col"><code>sort(list)</code>: Sort items</div>
        <div class="col"><code>map(list)</code>: Transform values</div>
        <div class="col"><code>filter(list)</code>: Filter truthy values</div>
        <div class="col"><code>sum(list)</code>: Total sum</div>
        <div class="col"><code>max(list)</code>, <code>min(list)</code>: Find max/min</div>
      </div>
    </section>
      <hr>
    <section id="syntax" class="mb-5 text-center">
      <h2 class="text-center">Syntax</h2>
      <p class="text-center">Basic SimpleScript syntax:</p>
      <pre><code class="bg-light p-3 d-block">
let x = 10
print x
if x > 5 then
    print "x is greater than 5"
endif
      </code></pre>
    </section>
      <hr>
    <section id="examples" class="mb-5 text-center">
      <h2 class="text-center">Examples</h2>
      <pre><code class="bg-light p-3 d-block">
let sum = 0
for i = 1 to 10 do
    sum = sum + i
endfor
print sum
      </code></pre>
    </section>
      <hr>
    <section id="try" class="mb-5">
      <h2 class="text-center">Try SimpleScript</h2>
      <textarea class="form-control mb-3" id="scriptInput" rows="6" placeholder="Enter your SimpleScript code here..."></textarea>
      <br>
      <div class="center-btn">
         <button class="btn btn-primary" onclick="runSimpleScript()">Run</button>
      </div>
      <pre class="bg-dark text-white p-3 mt-3" id="output"></pre>
    </section>
  </main>
    <hr>
  <footer class="text-center text-white py-3">
    &copy; 2024 SimpleScript
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>