Permalink
Browse files

Plain HTML Version

This is the initial commit of the Backbone-Reactive demo. This consists
of two very simple html pages, one for the homepage/dashboard and one
for an inbox style list page.

The purpose of these pages are to serve as a last-resort fallback. If
the user, for whatever reason, doesn't have Javascript (possibly on an
old browser, old phone etc) then they can still see the basic details
needed.

With this demo project, I am not worried too much about css or even
valid/correct html. It is all about the Javascript, so please ignore the
lack of css and state of the html.

Included in this commit is a very simple static file server. This is to
allow for the easy testing of the demo, without having to mess about
with a "proper" web server, such as Apache or Nginx
  • Loading branch information...
robsearles committed Jan 8, 2013
0 parents commit 5bd639797c9df0967280fdff5fa5b9b7c047bcb8
Showing with 256 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +35 −0 _server.js
  3. +21 −0 index.html
  4. +64 −0 list.html
  5. +27 −0 messages/1.html
  6. +27 −0 messages/2.html
  7. +27 −0 messages/3.html
  8. +27 −0 messages/4.html
  9. +27 −0 messages/5.html
@@ -0,0 +1 @@
node_modules/
@@ -0,0 +1,35 @@
// ************************************************************************
// # Static File Server
//
// This is a very simple static file server. This has been included to
// make it easier to test the Backbone-Reactive demo. You don't have
// to mess about with Apache, Nginx or any other web server.
//
// ## Usage Once you have installed the requirements (listed below)
// you can run the server using the command:
//
// node /path.to/backbone-reactive/_server.js
//
// You should now be able to visit http://localhost:7777 in your
// browser and see the demo.
//
// ## Requirements
// nodejs: http://nodejs.org/
// connect module: http://www.senchalabs.org/connect/
// - npm install connect
//
// ************************************************************************
// required modules
var util = require('util');
var connect = require('connect');
// settings
var port = 7777;
// create the server and instruct it to server static files
connect.createServer(connect.static(__dirname)).listen(port);
// output some info for the user
console.log('Static server started on ' + port);
console.log('To stop the server, press Ctrl + C');
@@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | Homepage</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive</h1>
<p>Welcome to the Backbone Reactive demo.</p>
<p>This is just a simple homepage for users that do not have advanced and modern browsers.</p>
<p>This content is replaced by the backbone application, but is useful as a last-resort fallback.</p>
</div>
</body>
</html>
@@ -0,0 +1,64 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: List</h1>
<p>Again, this page is a simple fallback for those users that for
whatever reason do not have Javascript enabled.</p>
<p>This is a simple table list, useful for say an email inbox or similar.</p>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Date</th>
<td>Subject</td>
<td>From</td>
</tr>
</thead>
<tbody>
<tr>
<td>11:04</td>
<td>8 January 2013</td>
<td><a href="/messages/5.html">Testing the Backbone Reactive List Page</a></td>
<td>Rob</td>
</tr>
<tr>
<td>11:00</td>
<td>8 January 2013</td>
<td><a href="/messages/4.html">Another exciting subject line</a></td>
<td>John</td>
</tr>
<tr>
<td>10:46</td>
<td>8 January 2013</td>
<td><a href="/messages/3.html">I just love dancing</a></td>
<td>Billy</td>
</tr>
<tr>
<td>13:36</td>
<td>7 January 2013</td>
<td><a href="/messages/2.html">Possible expansion plans</a></td>
<td>Wilhelm</td>
</tr>
<tr>
<td>12:54</td>
<td>7 January 2013</td>
<td><a href="/messages/1.html">Can't think of anything witty</a></td>
<td>Susan</td>
</tr>
</table>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: Message</h1>
<p><label>Subject:</label> Can't think of anything witty</p>
<p><label>Date:</label> 7 January 2013, 12:54</p>
<p><label>From:</label> Susan</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<p>Praesent sit amet est eros, vel rhoncus eros. Pellentesque consectetur, urna ac sodales vulputate, dolor lectus vehicula ante, at molestie nisi turpis non sem. Sed molestie urna eu quam malesuada tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<hr size="0" />
<p><a href="/list.html">Back to list</a></p>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: Message</h1>
<p><label>Subject:</label> Possible Expansion Plans</p>
<p><label>Date:</label> 7 January 2013, 13:36</p>
<p><label>From:</label> Wilhelm</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<p>Praesent sit amet est eros, vel rhoncus eros. Pellentesque consectetur, urna ac sodales vulputate, dolor lectus vehicula ante, at molestie nisi turpis non sem. Sed molestie urna eu quam malesuada tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<hr size="0" />
<p><a href="/list.html">Back to list</a></p>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: Message</h1>
<p><label>Subject:</label> I just love dancing</p>
<p><label>Date:</label> 8 January 2013, 10:46</p>
<p><label>From:</label> Billy</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<p>Praesent sit amet est eros, vel rhoncus eros. Pellentesque consectetur, urna ac sodales vulputate, dolor lectus vehicula ante, at molestie nisi turpis non sem. Sed molestie urna eu quam malesuada tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<hr size="0" />
<p><a href="/list.html">Back to list</a></p>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: Message</h1>
<p><label>Subject:</label> Another exciting subject line</p>
<p><label>Date:</label> 8 January 2013, 11:00</p>
<p><label>From:</label> John</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<p>Praesent sit amet est eros, vel rhoncus eros. Pellentesque consectetur, urna ac sodales vulputate, dolor lectus vehicula ante, at molestie nisi turpis non sem. Sed molestie urna eu quam malesuada tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<hr size="0" />
<p><a href="/list.html">Back to list</a></p>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Reactive | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/list.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: Message</h1>
<p><label>Subject:</label> Testing the Backbone Reactive List Page</p>
<p><label>Date:</label> 8 January 2013, 11:04</p>
<p><label>From:</label> Rob</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<p>Praesent sit amet est eros, vel rhoncus eros. Pellentesque consectetur, urna ac sodales vulputate, dolor lectus vehicula ante, at molestie nisi turpis non sem. Sed molestie urna eu quam malesuada tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<hr size="0" />
<p><a href="/list.html">Back to list</a></p>
</div>
</body>
</html>

0 comments on commit 5bd6397

Please sign in to comment.