download icon and some of help page

btzy · Aug 23, 2017 · 6add37d · 6add37d
1 parent d0c6fe2
commit 6add37d
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 5 deletions.
diff --git a/bf.html b/bf.html
@@ -5,7 +5,7 @@
         <meta charset="UTF-8">
         <title>Jelly Compiler for Brainfuck</title>
         <link href="https://fonts.googleapis.com/css?family=Chewy|Signika" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
         <link href="jelly-icon.css" rel="stylesheet">
         <link rel="stylesheet" href="bf.css" />
         <script src="ace/ace.js" type="text/javascript"></script>
@@ -30,7 +30,7 @@
                     <a class="title" href="bf.html"><span class="jelly">Jelly</span> Compiler for Brainfuck</a>
                     <div class="vertical-bar"></div>
                     <div id="openbutton" class="headerbutton" title="Open local file (Ctrl+O)"><input type="file" id="openbuttonfilepicker" /><i class="jelly-icon jelly-icon-open"></i><div class="button-name">Open</div></div>
-                    <div id="downloadbutton" class="headerbutton" title="Download code as file (Ctrl+S)"><i class="material-icons">file_download</i><div class="button-name">Download</div></div>
+                    <div id="downloadbutton" class="headerbutton" title="Download code as file (Ctrl+S)"><i class="jelly-icon jelly-icon-download"></i><div class="button-name">Download</div></div>
                     <div class="vertical-bar"></div>
                     <div id="compilebutton" class="headerbutton" title="Compile (F6)"><i class="jelly-icon jelly-icon-compile"></i><div class="button-name">Compile</div></div>
                     <div id="runbutton" class="headerbutton" title="Compile &amp; Run (F5)"><i class="jelly-icon jelly-icon-compile-run"></i><div class="button-name" style="white-space:nowrap;">Run</div></div>

diff --git a/fonts/Jelly-Icon.svg b/fonts/Jelly-Icon.svg
diff --git a/fonts/Jelly-Icon.ttf b/fonts/Jelly-Icon.ttf
diff --git a/fonts/Jelly-Icon.woff b/fonts/Jelly-Icon.woff
diff --git a/help.html b/help.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Using Jelly</title>
+        <link href="https://fonts.googleapis.com/css?family=Chewy|Signika" rel="stylesheet">
+        <link href="jelly-icon.css" rel="stylesheet">
+        <link rel="stylesheet" href="bf.css" />
+    </head>
+    <body>
+        <div class="wrapper">
+            <div id="header">
+                <div class="wrapper">
+                    <a class="title" href="bf.html"><span class="jelly">Jelly</span> Compiler for Brainfuck</a>
+                    <div class="extraspace"></div>
+                    <a id="helpbutton" class="headerbutton" title="Help (F1)" href="about.html" target="_blank"><i class="jelly-icon jelly-icon-help"></i><div class="button-name">Help</div></a>
+                    <a id="infobutton" class="headerbutton" title="About Jelly" href="about.html" target="_blank"><i class="jelly-icon jelly-icon-about"></i><div class="button-name">About</div></a>
+                    <div class="spaceend"></div>
+                </div>
+            </div>
+            <div id="about">
+                <h1>Using Jelly</h1>
+                <p>Jelly allows execution of your brainfuck program in three different modes:</p>
+                <ul>
+                    <li>Interpreted (Debug) + Interactive</li>
+                    <li>Compiled (Release) + Interactive</li>
+                    <li>Compiled (Release) + Non-Interactive</li>
+                </ul>
+                <p>Compiled mode runs significantly faster than interpreted mode as Jelly converts your brainfuck program to WebAssembly, which is compiled to native code on your browser.  A moderate amount of optimizations are also performed before generating the WebAssembly code, resulting in one of the fastest web-based brainfuck execution speeds.</p>
+                <p>Interpreted mode allows for step-through debugging and memory inspection &nbsp; modification.  Jelly's advanced debugging features may be accessed by using this mode.</p>
+                <p>Interactive mode means that input and output are interleaved like the Unix terminal or Windows command prompt, and you may read output and send input to your brainfuck program while it is running.  On the other hand, non-interactive mode requires that all input is prepared before starting execution and will only make any output visible after your program has terminated.</p>
+                <p>Unless you have large quantities of input or output to process, it is unlikely that your program will run significantly slower in interactive mode, so interactive mode is the recommended option to use.</p>
+                <p>To run your brainfuck program, simply type (or paste) your code in the code editor and click the "Run" button on the top menu after selecting the correct mode.</p>
+                <h2>Debugging Features</h2>
+                <p>Code may be paused at any time while running, by pressing the "Pause/Continue" button.  This will enter or exit pause mode.</p>
+
+            </div>
+        </div>
+
+    </body>
+</html>
diff --git a/icons/download(backup).svg b/icons/download(backup).svg
diff --git a/icons/download.svg b/icons/download.svg
diff --git a/jelly-icon.css b/jelly-icon.css
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'Jelly-Icon';
   src:
-    url('fonts/Jelly-Icon.ttf?32s6nr') format('truetype'),
-    url('fonts/Jelly-Icon.woff?32s6nr') format('woff'),
-    url('fonts/Jelly-Icon.svg?32s6nr#Jelly-Icon') format('svg');
+    url('fonts/Jelly-Icon.ttf?hrgy3s') format('truetype'),
+    url('fonts/Jelly-Icon.woff?hrgy3s') format('woff'),
+    url('fonts/Jelly-Icon.svg?hrgy3s#Jelly-Icon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -26,6 +26,9 @@
 .jelly-icon-open:before {
   content: "\1f4c2";
 }
+.jelly-icon-download:before {
+  content: "\f220";
+}
 .jelly-icon-compile:before {
   content: "\2699";
 }