display script API on the page

code/static/css/styles.css

@@ -1,13 +1,14 @@
 html {
-	min-height: 100%;
-	position: relative;
+  min-height: 100%;
+  position: relative;
 }
 
 body {
   color: #0E6251;
-	background-color: #FDF2E9;
-	min-height: 600px;
-	font: 14px/1.3 'Segoe UI',Arial, sans-serif;
+  background-color: #FDF2E9;
+  min-height: 600px;
+  font: 14px/1.3 'Segoe UI',Arial, sans-serif;
+  margin: 8px;
 }
 
 a:visited {
@@ -79,7 +80,7 @@ tr:nth-child(odd) {
   margin-left: 2em;
   margin-bottom: 1em;
 }
-#list_menu {
+#list_menu, #list_script {
   float:right;
   padding: 8px;
   border: 4px solid #148F77;
@@ -91,7 +92,7 @@ tr:nth-child(odd) {
   border-bottom-left-radius: 15px;
 }
 
-#list_menu ul {
+#list_menu ul, #list_script ul {
   margin-top: 0px;
   margin-bottom: 0px;
 }
@@ -117,6 +118,7 @@ tr:nth-child(odd) {
   margin-top: 24px;
   cursor: pointer;
   text-align: right;
+  text-decoration: underline;
 }
 #list_info {
   display: none;
@@ -129,10 +131,38 @@ tr:nth-child(odd) {
   margin-bottom: 33px;
 }
 
+#list_script {
+  display: none;
+  z-index: 99;
+  position: absolute;
+  padding-top: 2em;
+  padding-bottom: 2em;
+  right: 8px;
+}
+
+#list_script_toggle {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .direct {
   margin-right: 1em;
 }
 
+.upper_corner {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}
+
+.code {
+	background-color: #FDF2E9;
+  font-family: monospace;
+  margin-right: 2em;
+  margin-bottom: 1em;
+  word-wrap: break-word;
+}
+
 /* index */
 
 #index_title {

code/static/js/scripts.js

@@ -27,6 +27,12 @@ function infoToggle() {
 }
 
 
+function scriptToggle() {
+    var el = document.getElementById("list_script");
+    el.style.display = el.style.display === 'block' ? 'none' : 'block';
+}
+
+
 function UploadFile(file,file_no,files_total) {
     if (uploadTurn != file_no) {
         // Wait for our turn to upload. check every 0.5s