Added Grains Presenstation to Web server

lib/grains/endpoint.ex

@@ -9,7 +9,7 @@ defmodule Grains.Endpoint do
   # when deploying your static files in production.
   plug Plug.Static,
     at: "/", from: :grains, gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(css fonts images js favicon.ico robots.txt index.html)
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.

mix.exs

@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
 
   def project do
     [app: :grains,
-     version: "0.0.102",
+     version: "0.0.103",
      elixir: "~> 1.2",
      elixirc_paths: elixirc_paths(Mix.env),
      compilers: [:phoenix, :gettext] ++ Mix.compilers,

web/controllers/page_controller.ex

@@ -4,4 +4,5 @@ defmodule Grains.PageController do
   def index(conn, _params) do
     render conn, "index.html"
   end
+
 end

web/static/css/grains.css

+/* This file left intentionally (almost) blank
+
+   Landslide always adds a print.css and a screen.css, but they
+   are not needed in impress.js, so this theme leaves them blank,
+   except for hiding some things you want to hide.
+
+   You can modify these files in your own fork, or you can add
+   css-files in the landslide configuration file.
+   See https://github.com/adamzap/landslide#presentation-configuration
+
+*/
+
+@font-face {
+  font-family: 'Fredericka the Great';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fredericka the Great'), local('FrederickatheGreat'), url(https://fonts.gstatic.com/s/frederickathegreat/v5/7Es8Lxoku-e5eOZWpxw18k-V1Rr5FrXsa4CVETJgBSz3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+
+.impress-supported .fallback-message,
+.step .notes {
+    display: none;
+}
+
+
+
+/* Help popup */
+
+#hovercraft-help {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
+    color: #EEEEEE;
+    font-size: 100%;
+    left: 2em;
+    bottom: 2em;
+    width: 26em;
+    border-radius: 1em;
+    padding: 1em;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 100;
+    display: block;
+    font-family: Verdana, Arial, Sans;
+}
+
+.impress-enabled #hovercraft-help.hide {
+    display: none;
+}
+
+#hovercraft-help.disabled {
+    display: none;
+}
+
+body {
+    min-height: 740px;
+    color: black;
+    // background: #fff;
+
+    // background: rgb(230, 230, 230);
+    background: radial-gradient(rgb(250, 250, 250), rgb(210, 210, 210));
+}
+
+
+.step {
+    width: 900px;
+    padding: 20px;
+    margin: 20px auto;
+    font-size: 36px;
+    line-heigt: 1.5;
+
+}
+
+.impress-enabled .step {
+    margin: 0;
+    opacity: 0.1;
+
+    transition:         opacity 1s;
+}
+
+.impress-enabled .step.active { opacity: 1 }
+
+h1 {
+    font-family: 'Fredericka the Great', cursive;
+    font-weight: bold;
+}
+
+h2 {
+    font-family: 'Fredericka the Great', cursive;
+    font-weight: bold;
+}
+
+
+li {
+    line-height: 1.4em;
+}
+
+#title h1 {
+
+    font-size: 180px;
+    font-weight: bold;
+    line-height: 140px;
+}
+
+#title h2 {
+    font-size: 72px;
+    font-style: italic;
+
+}
+
+#title ul {
+    list-style: none;
+}

web/static/css/highlight.css

+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #408090; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #007020; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .cm { color: #408090; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #007020 } /* Comment.Preproc */
+.highlight .c1 { color: #408090; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #408090; background-color: #fff0f0 } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #303030 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0040D0 } /* Generic.Traceback */
+.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #007020 } /* Keyword.Pseudo */
+.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #902000 } /* Keyword.Type */
+.highlight .m { color: #208050 } /* Literal.Number */
+.highlight .s { color: #4070a0 } /* Literal.String */
+.highlight .na { color: #4070a0 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+.highlight .no { color: #60add5 } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #007020 } /* Name.Exception */
+.highlight .nf { color: #06287e } /* Name.Function */
+.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #bb60d5 } /* Name.Variable */
+.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #208050 } /* Literal.Number.Float */
+.highlight .mh { color: #208050 } /* Literal.Number.Hex */
+.highlight .mi { color: #208050 } /* Literal.Number.Integer */
+.highlight .mo { color: #208050 } /* Literal.Number.Oct */
+.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
+.highlight .sc { color: #4070a0 } /* Literal.String.Char */
+.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
+.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
+.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+.highlight .sx { color: #c65d09 } /* Literal.String.Other */
+.highlight .sr { color: #235388 } /* Literal.String.Regex */
+.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
+.highlight .ss { color: #517918 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
+.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
+.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
+.highlight .il { color: #208050 } /* Literal.Number.Integer.Long */
\ No newline at end of file

web/static/css/hovercraft.css

+/* This file left intentionally (almost) blank
+
+   Landslide always adds a print.css and a screen.css, but they
+   are not needed in impress.js, so this theme leaves them blank,
+   except for hiding some things you want to hide.
+
+   You can modify these files in your own fork, or you can add
+   css-files in the landslide configuration file.
+   See https://github.com/adamzap/landslide#presentation-configuration
+
+*/
+
+.impress-supported .fallback-message,
+.step .notes {
+    display: none;
+}
+
+.step {
+    width: 800px;
+}
+
+
+/* Help popup */
+
+#hovercraft-help {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
+    color: #EEEEEE;
+    font-size: 100%;
+    left: 2em;
+    bottom: 2em;
+    width: 26em;
+    border-radius: 1em;
+    padding: 1em;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 100;
+    display: block;
+    font-family: Verdana, Arial, Sans;
+}
+
+.impress-enabled #hovercraft-help.hide {
+    display: none;
+}
+
+#hovercraft-help.disabled {
+    display: none;
+}

web/static/css/impressConsole.css

+html#impressconsole {
+    height: 100%
+}
+
+#impressconsole body {
+    padding: 0;
+    margin: 20px;
+    font-family: verdana, arial, sans-serif;
+    font-size: 26px;
+    height: 92%;
+}
+
+div#console {
+    margin: 0;
+    height: 94%;
+}
+
+div#views {
+    float: left;
+    width: 16em;
+    margin-right: 1em;
+}
+
+div#blocker {
+    width: 17em;
+    height: 20em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: blocker;
+}
+
+div#notes {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 95%;
+}
+
+div#notes p {
+    margin-top: 0;
+}
+
+iframe#slideView {
+    width: 16em;
+    height: 12em;
+}
+
+iframe#preView {
+    width: 8em;
+    height: 6em;
+}
+
+div#controls {
+    margin: 0;
+    height: 6%;
+}
+
+div#prev {
+    float: left;
+}
+
+div#next {
+    float: right;
+}
+
+div#status {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+    float: right;
+}
+
+div#clock {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+    float: left;
+}
+
+div#timer {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+    float: left;
+}

web/static/js/hovercraft.js

+// Initialize impress.js
+impress().init();
+
+// Set up the help-box
+var helpdiv = window.document.getElementById('hovercraft-help');
+
+if (window.top!=window.self) {
+    // This is inside an iframe, so don't show the help.
+    helpdiv.className = "disabled";
+
+} else {
+    // Install a funtion to toggle help on and off.
+    var help = function() {
+        if(helpdiv.className == 'hide')
+            helpdiv.className = 'show';
+        else
+            helpdiv.className = 'hide';
+    };
+    impressConsole().registerKeyEvent([72], help, window);
+
+    // The help is by default shown. Hide it after five seconds.
+    setTimeout(function () {
+        var helpdiv = window.document.getElementById('hovercraft-help');
+        if(helpdiv.className != 'show')
+            helpdiv.className = 'hide';
+    }, 5000);
+}
+
+
+if (impressConsole) {
+    impressConsole().init(cssFile='css/impressConsole.css');
+
+    var impressattrs = document.getElementById('impress').attributes
+    if (impressattrs.hasOwnProperty('auto-console') && impressattrs['auto-console'].value.toLowerCase() === 'true') {
+        consoleWindow = console().open();
+    }
+}

web/templates/page/index.html.eex

@@ -2,8 +2,14 @@
   <h2><%= gettext "Welcome to %{name}", name: "Grains!" %></h2>
   <p class="lead">An experiment in granular synthesis<br />
     the mobile web and the cloud.</p>
+  <p>
+  <a href="index.html">TNC 2017 Presentation</a>
+  </p>
 </div>
 
 <div>
       <a href="/play/play" class="btn-lg btn-success btn-block play">Play</a>
 </div>
+
+<div>
+</div>