Started working on the front-end.

.gitignore

@@ -1,3 +1,4 @@
 build/
 .gradle/
 *.sw?
+.sass-cache/

build.gradle

@@ -37,6 +37,12 @@ dependencies {
     */
 }
 
+war {
+    from "resources/webapp"
+}
+
+// ## Custom tasks for local deployment
+
 task deployLocal(dependsOn: ['build']) << {
     def warName = "${project.name}-${version}.war"
     def jettyHome = System.getenv("JETTY_HOME")

resources/webapp/css/forSize.mixin.scss

@@ -0,0 +1,33 @@
+$xSmallScreen: 320px;
+$smallScreen: 640px;
+$wideScreen: 1200px;
+$ultraWideScreen: 1600px;
+
+/** ### forSize
+  * This mixin allows us to apply some rules selectively based on the screen
+  * size. There are three primary sizes: `small`, `medium`, and `large`, which
+  * are mutually exclusive. Additionally there are two additional sizes:
+  * `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
+  * value which is not the small screen size, so it overlaps with medium,
+  * large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
+  * than large, but neither large nor ultraLarge specify maximum widths,
+  * so ultraLarge is a strict subset of large. A screen large enough to match
+  * ultraLarge will also match large (compare with medium and large: matching
+  * medium means it will not match large, and vice versa). */
+@mixin forSize($size) {
+
+    @if $size == xsmall {
+        @media screen and (max-width: $xSmallScreen) { @content; } }
+    @else if $size == small {
+        @media screen and (max-width: $smallScreen) { @content; } }
+    @else if $size == notSmall {
+        @media screen and (min-width: $smallScreen + 1) { @content; } }
+    @else if $size == medium {
+        @media screen and (min-width: $smallScreen + 1) and (max-width: $wideScreen - 1) { @content; } }
+    @else if $size == large {
+        @media screen and (min-width: $wideScreen) { @content; } }
+    @else if $size == ultraLarge {
+        @media screen and (min-width: $ultraWideScreen) { @content; } }
+}
+
+

resources/webapp/css/new-life-songs.css

@@ -0,0 +1,62 @@
+/**
+ * # New Life Songs DB
+ * @author Jonathan Bernard <jdb@jdb-labs.com>
+ */
+/** ### forSize
+  * This mixin allows us to apply some rules selectively based on the screen
+  * size. There are three primary sizes: `small`, `medium`, and `large`, which
+  * are mutually exclusive. Additionally there are two additional sizes:
+  * `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
+  * value which is not the small screen size, so it overlaps with medium,
+  * large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
+  * than large, but neither large nor ultraLarge specify maximum widths,
+  * so ultraLarge is a strict subset of large. A screen large enough to match
+  * ultraLarge will also match large (compare with medium and large: matching
+  * medium means it will not match large, and vice versa). */
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+
+/* HTML5 elements */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  color: #333;
+  font-family: Cantarell;
+  margin: 2rem auto;
+  width: 60rem; }
+
+header {
+  position: relative; }
+  header > h1, header > h2 {
+    font-family: "Roboto Condensed";
+    margin-bottom: 1.5em; }
+  header nav {
+    position: absolute;
+    top: 0;
+    right: 0; }
+    header nav ul {
+      list-style: none; }
+      header nav ul li {
+        display: block;
+        float: right;
+        padding: 0.4rem 0.6rem; }
+        header nav ul li a {
+          color: #333;
+          display: block;
+          padding: 0.1rem 0.4rem;
+          text-decoration: none; }
+        header nav ul li a:hover {
+          background-color: #333;
+          border-radius: 3px;
+          color: white; }
+
+th {
+  font-family: "Roboto Condensed"; }
+
+/*# sourceMappingURL=new-life-songs.css.map */

resources/webapp/css/new-life-songs.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";;;;;;;;;;;;;;;AACA,CAAE;EACE,eAAe,EAAE,UAAU;EAC3B,kBAAkB,EAAE,UAAU;EAC9B,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGd;0CACsC;EAClC,OAAO,EAAC,KAAK;;ACAjB,IAAK;EACD,KAAK,EANF,IAAI;EAOP,WAAW,EAAE,SAAS;EACzB,MAAM,EAAE,SAAS;EACjB,KAAK,EAAE,KAAK;;AAEb,MAAO;EACH,QAAQ,EAAE,QAAQ;EAElB,wBAAe;IACX,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,KAAK;EAExB,UAAI;IACA,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IAER,aAAG;MACC,UAAU,EAAE,IAAI;MAEhB,gBAAG;QACC,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,aAAa;QAEtB,kBAAE;UACE,KAAK,EAhClB,IAAI;UAiCS,OAAO,EAAE,KAAK;UACd,OAAO,EAAE,aAAa;UACtB,eAAe,EAAE,IAAI;QAEzB,wBAAQ;UACJ,gBAAgB,EAtC7B,IAAI;UAuCS,aAAa,EAAE,GAAG;UAClB,KAAK,EAAE,KAAK;;AAIhC,EAAG;EAAE,WAAW,EAAE,kBAAkB",
+"sources": ["reset.scss","new-life-songs.scss"],
+"names": [],
+"file": "new-life-songs.css"
+}

resources/webapp/css/new-life-songs.scss

@@ -0,0 +1,51 @@
+/**
+ * # New Life Songs DB
+ * @author Jonathan Bernard <jdb@jdb-labs.com>
+ */
+
+
+$dark: #333;
+
+@import "forSize.mixin.scss";
+@import "reset.scss";
+
+body {
+    color: $dark;
+    font-family: Cantarell;
+	margin: 2rem auto;
+	width: 60rem; }
+
+header {
+    position: relative;
+
+    & > h1, & > h2 {
+        font-family: "Roboto Condensed";
+        margin-bottom: 1.5em; }
+        
+    nav {
+        position: absolute;
+        top: 0;
+        right: 0;
+        
+        ul {
+            list-style: none;
+            
+            li {
+                display: block;
+                float: right;
+                padding: 0.4rem 0.6rem;
+
+                a {
+                    color: $dark;
+                    display: block;
+                    padding: 0.1rem 0.4rem;
+                    text-decoration: none; }
+
+                a:hover {
+                    background-color: $dark;
+                    border-radius: 3px;
+                    color: white;
+                }
+            } } } }
+
+th { font-family: "Roboto Condensed"; }

resources/webapp/css/reset.scss

@@ -0,0 +1,14 @@
+/// Global Rules
+* {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0; }
+
+/* HTML5 elements */
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block; }
+
+

resources/webapp/images/favicon.svg

@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="/home/jdbernard/projects/new-life-songs/src/main/webapp/images/favicon.png"
+   inkscape:export-xdpi="180"
+   inkscape:export-ydpi="180">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="36.631424"
+     inkscape:cy="36.08398"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1028"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-196,-232.71932)">
+    <g
+       id="g3972"
+       transform="matrix(1.1988541,0,0,1.1988541,-34.689684,-59.360988)">
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="path3066"
+         d="m 197.85715,270.75504 c 18.44039,-9.68553 31.88947,-7.2133 43.21428,0.17857 l 0.17857,23.39286 c -15.06612,-7.66829 -29.63623,-7.15253 -43.75,0.89285 z"
+         style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+      <path
+         sodipodi:nodetypes="ccc"
+         inkscape:connector-curvature="0"
+         id="path3836"
+         d="m 218.57143,288.34432 c 5.66926,-15.13182 -22.94395,-29.42428 4.28571,-44.10714 -18.57938,17.81207 6.32776,26.01559 -4.28571,44.10714 z"
+         style="fill:#f47321;fill-opacity:1;stroke:#f47321;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="ccc"
+         inkscape:connector-curvature="0"
+         id="path3838"
+         d="m 220.89286,250.84432 c -7.46377,9.88399 15.90915,18.84168 0.89285,36.96429 5.71398,-18.35279 -10.64059,-29.80509 -0.89285,-36.96429 z"
+         style="fill:#f8981d;fill-opacity:1;stroke:#f8981d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <g
+         style="stroke:#666666"
+         transform="translate(30.241442,19.824244)"
+         id="g3957">
+        <g
+           style="stroke:#666666"
+           id="g3954">
+          <path
+             sodipodi:nodetypes="cccc"
+             inkscape:connector-curvature="0"
+             id="path3928"
+             d="m 181.13839,263.45593 -0.40178,-9.53125 -6.07143,-0.26785 0.37948,9.66517"
+             style="fill:none;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+        </g>
+        <path
+           style="fill:none;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 174.64286,256.73718 6.11607,0.29018"
+           id="path3930"
+           inkscape:connector-curvature="0" />
+        <path
+           sodipodi:type="arc"
+           style="fill:none;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="path3932"
+           sodipodi:cx="172.16518"
+           sodipodi:cy="261.9046"
+           sodipodi:rx="1.1607143"
+           sodipodi:ry="0.390625"
+           d="m 173.32589,261.9046 c 0,0.21574 -0.51967,0.39063 -1.16071,0.39063 -0.64105,0 -1.16072,-0.17489 -1.16072,-0.39063 0,-0.21573 0.51967,-0.39062 1.16072,-0.39062 0.64104,0 1.16071,0.17489 1.16071,0.39062 z"
+           transform="matrix(0.80146427,0,0,0.86720805,35.41978,35.950686)" />
+        <path
+           sodipodi:type="arc"
+           style="fill:none;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="path3932-8"
+           sodipodi:cx="172.16518"
+           sodipodi:cy="261.9046"
+           sodipodi:rx="1.1607143"
+           sodipodi:ry="0.390625"
+           d="m 173.32589,261.9046 c 0,0.21574 -0.51967,0.39063 -1.16071,0.39063 -0.64105,0 -1.16072,-0.17489 -1.16072,-0.39063 0,-0.21573 0.51967,-0.39062 1.16072,-0.39062 0.64104,0 1.16071,0.17489 1.16071,0.39062 z"
+           transform="matrix(0.80146427,0,0,0.86720805,41.50237,36.374793)" />
+      </g>
+      <g
+         style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-opacity:1"
+         transform="translate(45.892857,26.25)"
+         id="g3968">
+        <path
+           style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 187.76786,245.59879 0.13393,10.87054"
+           id="path3964"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cc" />
+        <path
+           sodipodi:type="arc"
+           style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+           id="path3966"
+           sodipodi:cx="184.96652"
+           sodipodi:cy="255.05191"
+           sodipodi:rx="0.8370536"
+           sodipodi:ry="0.41294643"
+           d="m 185.80358,255.05191 c 0,0.22806 -0.37477,0.41295 -0.83706,0.41295 -0.46229,0 -0.83705,-0.18489 -0.83705,-0.41295 0,-0.22806 0.37476,-0.41295 0.83705,-0.41295 0.46229,0 0.83706,0.18489 0.83706,0.41295 z"
+           transform="matrix(1.103543,0,0,0.80447905,-18.013595,51.017545)" />
+      </g>
+    </g>
+  </g>
+</svg>

resources/webapp/images/new-life-songs.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="319.93701"
+   height="41.225643"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="new-life-songs.svg"
+   inkscape:export-filename="/home/jdbernard/projects/new-life-songs/src/main/webapp/images/new-life-songs.png"
+   inkscape:export-xdpi="112.52"
+   inkscape:export-ydpi="112.52">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="84.054843"
+     inkscape:cy="-31.95016"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1028"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.563,-63.265607)">
+    <text
+       xml:space="preserve"
+       style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Aldrich;-inkscape-font-specification:Aldrich"
+       x="110"
+       y="95.933609"
+       id="text2985"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan2987"
+         x="110"
+         y="95.933609">New Life Songs</tspan></text>
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.84500003;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 389.73551,102.40638 c -45.27776,0 -285.24751,0.0799 -285.24751,0.0799 0.18336,-10.359756 0,-26.719287 0,-37.295643"
+       id="path2989"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+  </g>
+</svg>

src/main/webapp/WEB-INF/web.xml

@@ -29,9 +29,24 @@
         <load-on-startup>1</load-on-startup>
     </servlet>
 
+    <servlet>
+        <servlet-name>GroovyTemplate</servlet-name>
+        <servlet-class>groovy.servlet.TemplateServlet</servlet-class>    
+    </servlet>
+
     <servlet-mapping>
         <servlet-name>New Life Songs REST API</servlet-name>
         <url-pattern>/api/*</url-pattern>
     </servlet-mapping>
 
+    <servlet-mapping>
+        <servlet-name>GroovyTemplate</servlet-name>
+        <url-pattern>*.gsp</url-pattern>
+    </servlet-mapping>
+
+    <welcome-file-list>
+        <welcome-file>index.gsp</welcome-file>
+        <welcome-file>index.jsp</welcome-file>
+        <welcome-file>index.html</welcome-file>
+    </welcome-file-list>
 </web-app>

src/main/webapp/js/new-life-songs.js

@@ -0,0 +1,8 @@
+(function() {
+
+	var NLS = window.NewLifeSongs = {};
+
+	/// ## Models
+
+	/// ## Views
+})();

src/main/webapp/services/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <link rel="shortcut icon" href="../images/favicon.ico">
+
+        <title>Services - New Life Songs Database</title>
+        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
+        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
+        <script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
+        <!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
+        <script type="application/javascript" src="../js/new-life-songs.js"></script>
+        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'>
+        <link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
+        <link href='../css/new-life-songs.css' rel='stylesheet' type='text/css'>
+    </head>
+    <body>
+        <header>
+            <h1>New Life Songs</h1>
+            <h2>Services</h2>
+
+            <nav><ul>
+                <li><a href="../admin/">Admin</a></li>
+                <li><a href="../songs/">Songs</a></li>
+                <li><a href="../services/">Services</a></li>
+            </ul></nav>
+        </header>
+        <section class=songs>
+            <table id=songs-table class="row-border hover compact" cellspacing=0>
+                <thead><tr>
+                        <th class="dt-left">Date</th>
+                        <th class="dt-left">Service Type</th>
+                </tr></thead>
+                <tfoot><tr>
+                        <th class="dt-left">Date</th>
+                        <th class="dt-left">Service Type</th>
+                </tr></tfoot>
+            </table>
+        </section>
+
+        <script type="application/javascript">
+            window.onload = function() {
+            
+                $("#songs-table").dataTable( {
+                    "ajax": {
+                        "url": "http://localhost:8080/new-life-songs-2.0/api/v1/services/",
+                        "dataSrc": "" },
+                    "columns": [
+                        { "data": "date" },
+                        { "data": "serviceType" } ] }); };
+        </script>
+    </body>
+</html>

src/main/webapp/songs/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <link rel="shortcut icon" href="../images/favicon.ico">
+
+        <title>Songs - New Life Songs Database</title>
+        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
+        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
+        <script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
+        <!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
+        <script type="application/javascript" src="../js/new-life-songs.js"></script>
+        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'>
+        <link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
+        <link href='../css/new-life-songs.css' rel='stylesheet' type='text/css'>
+    </head>
+    <body>
+        <header>
+            <h1>New Life Songs</h1>
+            <h2>Songs</h2>
+
+            <nav><ul>
+                <li><a href="../admin/">Admin</a></li>
+                <li><a href="../songs/">Songs</a></li>
+                <li><a href="../services/">Services</a></li>
+            </ul></nav>
+        </header>
+        <section class=songs>
+            <table id=songs-table class="row-border hover compact" cellspacing=0>
+                <thead><tr>
+                        <th class="dt-left">Name</th>
+                        <th class="dt-left">Artists</th>
+                </tr></thead>
+                <tfoot><tr>
+                        <th class="dt-left">Name</th>
+                        <th class="dt-left">Artists</th>
+                </tr></tfoot>
+            </table>
+        </section>
+
+        <script type="application/javascript">
+            window.onload = function() {
+            
+                $("#songs-table").dataTable( {
+                    "ajax": {
+                        "url": "http://localhost:8080/new-life-songs-2.0/api/v1/songs/",
+                        "dataSrc": "" },
+                    "columns": [
+                        { "data": "name" },
+                        { "data": "artists" } ] }); };
+        </script>
+    </body>
+</html>