Initial webpage support

initial webpage support - note download links awaiting new build
jfo8000 · Apr 30, 2018 · 8a6474f · 8a6474f
1 parent 30fb237
commit 8a6474f
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1,167 @@
-Scratch JR Desktop - Open Source Community Port
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="../../../../favicon.ico">
+
+    <title>Scratch JR for Desktop | Open Source Community Port</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
+        <!-- Bootstrap core CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+
+    <!-- Custom styles for this template -->
+    <link href="pricing.css" rel="stylesheet">
+    <style>
+        .standard-indent {
+            margin-left: 40px;
+              margin-right: 40px;
+        }
+
+       .bg-blue {
+         background-color: #3099C9;
+         padding: 4em;
+       }
+       .title {
+        font-family: 'Gloria Hallelujah', cursive;
+       }
+        .orangeBar {
+            background-color: #f5a322;
+            color: #ffffff;
+            padding: 2em;
+
+        }
+    </style>
+  </head>
+
+  <body>
+
+<div class='orangeBar'>
+      <h3 class="my-0 mr-md-auto font-weight-normal title">Scratch Jr for Desktop - Open Source Community Port</h3>
+</div>
+
+<div class=" bg-blue ">
+<div class=" bg-white">
+   <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center ">
+      <h1 class="display-4">About</h1>
+
+      <p class="lead">
+        A community open source port of a well-loved early educational programming tool.
+
+
+
+      </p>
+      <div class='text-left standard-indent'>
+
+           We are very excited about the use of  <a href='https://www.scratchjr.org/about/info'>Scratch Jr</a> in the classroom, especially for children in early school years.
+
+           When we discovered the schools in our area did not have access to tablets, we decided to turn the tablet app into a full
+           fledged desktop app.  In order to do this, we have taken the original code recompiled it for Mac and Windows.  
+
+           <br/>
+           <br/>
+
+           Note: this app could be also used in offline mode (without internet connection).
+
+
+
+        </div>
+
+    </div>
+
+    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+      <h1 class="display-4">Downloads</h1>
+      <p class="lead">
+
+      <br/>
+      Download the latest install to your Mac or Windows computer.  
+      <br/>For tablets, <a href='https://www.scratchjr.org/'> please see the official build</a>.
+
+      </p>
+    </div>
+
+    <div class="container">
+      <div class="card-deck mb-3 text-center">
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Mac (Beta 1.2.4)</h4>
+          </div>
+          <div class="card-body">
+
+            Download a DMG to install Scratch JR to your Mac.   
+            <div style='height: 300px'>
+                <img src='./scratchformac.png' width='400px'></img>
+            </div>
+            By downloading this software, you agree to the <a href='https://github.com/jfo8000/ScratchJr-Desktop/blob/master/LICENSE'>terms and conditions of the license</a>.
+
+            <button type="button" class="btn btn-lg btn-block btn-primary">Download (Mac)</button>
+          </div>
+        </div>
+        <div class="card mb-4 box-shadow">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Windows (Beta 1.2.4)</h4>
+          </div>
+          <div class="card-body">
+            Download a setup EXE to install Scratch JR to your PC.
+            <div style='height: 300px'>
+             <img src='./scratchjrwin.png' width='400px'></img>
+            </div>
+            By downloading this software, you agree to the <a href='https://github.com/jfo8000/ScratchJr-Desktop/blob/master/LICENSE'>terms and conditions of the license</a>.
+
+            <button type="button" class="btn btn-lg btn-block btn-primary">Download (Win)</button>
+          </div>
+        </div>
+
+      </div>
+
+    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+      <h1 class="display-4">The nitty gritty </h1>
+       <div class='text-left standard-indent'>
+        <h5>Same app, new platform.</h5>
+
+          To port to the desktop, a small database and filesystem layer was rewritten, as well as access to video and sound. 
+
+          <br/><br/>  
+           This was accomplished using 
+           <a href="https://electronjs.org/">Electron</a> for the app hosting, the original html source of ScratchJR and <a href="https://github.com/kripken/sql.js/">SQL.js</a> for the project database.
+           Electron is like having your own chrome browser to run one html webpage.   And in our case, that webpage is ScratchJR.
+
+         <br/><br/>
+           <h5>Thanks</h5>
+
+            Thank you to the  <a href='https://github.com/LLK/scratchjr'>official Scratch Jr team and their supporters</a>.
+
+In addition, thank you to the folks working on Electron, ElectronForge, and Sql.js.  Thank you to AppVeyor and Travis CL for contributing free Mac, Windows and Linux builds.
+<br/> <br/>
+Finally, a special thank you to <a href="https://www.scopeiteducation.edu.au/">ScopeIT Education</a> for donating their technical expertise to this project.
+
+
+
+
+         </div>
+
+    </div>
+
+
+    </div>
+      <footer class="pt-4 my-md-5 pt-md-5 border-top">
+           <div class='text-left standard-indent'>
+            More info about ScratchJr can be found <a href='https://www.scratchjr.org/about/info'> here</a>.
+        </div>
+      </footer>
+      </div>
+    </div>
+
+
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/docs/scratchformac.png b/docs/scratchformac.png
diff --git a/docs/scratchjrwin.png b/docs/scratchjrwin.png
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "ScratchJr",
     "productName": "ScratchJr",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "description": "ScratchJr Desktop Edition",
     "main": "src/main.js",
     "scripts": {