Skip to content
This repository has been archived by the owner on Mar 10, 2020. It is now read-only.

Commit

Permalink
Redesign of the homepage.
Browse files Browse the repository at this point in the history 
Closes #5.
  • Loading branch information
@mcollina
mcollina committed Sep 24, 2012
1 parent 51aae28 commit cbf5470
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 118 deletions.
74 changes: 25 additions & 49 deletions app/assets/css/main.css.less
View file
@@ -1,54 +1,30 @@

@import "./lib/bootstrap.less";

/* Override some defaults */
html, body {
background-color: #eee;
}

body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}

.container > footer p {
text-align: center; /* center align it with the container */
}
.container {
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
}

/* The white background content wrapper */
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* Page header tweaks */
.page-header {
background-color: #f5f5f5;
padding: 20px 20px 10px;
margin: -20px -20px 20px;
}

/* Styles you shouldn't keep as they are for displaying this base example only */
.content .span10, .content .span4 {
min-height: 500px;
}

/* Give a quick and non-cross-browser friendly divider */
.content .span4, .topic-bar {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}

.topbar .btn {
border: 0;
padding-top: 60px;
padding-bottom: 40px;
}

@import "./lib/responsive.less";

.jumbo {
background-color: @heroUnitBackground;
background-image: url("/images/grey.png");
background-repeat: repeat;

.container();
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 30px;

.border-radius(6px);
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
color: @heroUnitHeadingColor;
letter-spacing: -1px;
}

}
10 changes: 10 additions & 0 deletions app/assets/js/home.js
View file
@@ -0,0 +1,10 @@

$(document).ready(function() {
$("#go").submit(function() {
var val = $("#topic").val()
if(val.length > 0) {
window.location = "/topics/" + val;
}
return false;
});
});
133 changes: 65 additions & 68 deletions app/views/home.hbs
View file
@@ -1,24 +1,42 @@

<div class="page-header">
<h1>QEST</h1>
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="jumbo">
<div class="row">
<div class="span1"><br></div>
<div class="span6">
<h1>QEST</h1>
<form id="go" method="get">
<h3>Open your topic</h3>
<div class="input-append">
<input type="text" id="topic" name="topic" class="input-large" rows="10" placeholder="Enter the topic name"></input>
<input type="submit" class="btn btn-success" value="GO!"></input>
</div>
</form>
</div>
<div class="span4">
<h2>Your latest topics</h2>
{{#if topics.length }}
<ul>
{{#each topics}}
<li><a href="/topics/{{this}}">{{this}}</a></li>
{{/each}}
</ul>
{{else}}
<p>
No topics found, let&lsquo;s open a new one!
</p>
{{/if}}
</div>
<div class="span1"><br></div>
</div>
</div>

<div class="row">
<div class="span7">
<div class="span4">
<h2>Building</h2>
{{#markdown}}
Hello geeks!

What you are seeing here is a prototype of a distributed [MQTT](http://mqtt.org) broker which is accessible through REST.
That's a lot of jargon, so let me show you the whole picture!

Here we are dreaming a Web of Things, where you can reach (and interact) with each of your "real" devices using the web,
as it's the Way everybody interacts with a computer these days.
However it's somewhat hard to build these kind of apps, so researchers have written custom protocols for communicating
with the devices.
The state-of-the-art seems to be [MQTT](http://mqtt.org), which is standard, free of royalties, and widespread:
there are libraries for all the major platforms.

QEST is a stargate between the universe of devices which speak MQTT, and the universe of apps which
speak HTTP.
QEST is a stargate between the universe of devices which speak [MQTT](http://mqtt.org), and the universe of apps which
speak [HTTP](http://en.wikipedia.org/wiki/HTTP) and [REST](http://en.wikipedia.org/wiki/REST).
In this way you don't have to deal any custom protocol, you just GET and PUT the topic URI, like these:

$ curl -X PUT -d '{ "hello": 555 }' \
Expand All @@ -28,63 +46,42 @@ In this way you don't have to deal any custom protocol, you just GET and PUT the
{ "hello": 555 }

Let's build cool things with MQTT, REST and Arduino!
{{/markdown}}
</div>

~ Matteo
<div class="span4">

{{/markdown}}
<h2>Dreaming</h2>
{{#markdown}}
Here we are dreaming a Web of Things, where you can reach (and interact) with each of your "real" devices using the web,
as it's the Way everybody interacts with a computer these days.
However it's somewhat hard to build these kind of apps, so researchers have written custom protocols for communicating
with the devices.

The state-of-the-art protocol for __devices__ is [MQTT](http://mqtt.org), which is standard, free of royalties, and widespread:
there are libraries for all the major platforms.

The state-of-the-art protocol for __apps__ are [REST](http://en.wikipedia.org/wiki/REST) and [HTTP](http://en.wikipedia.org/wiki/HTTP),
so why can't we bridge them? So QEST was born.
{{/markdown}}
</div>
<div class="span6 topic-bar">
<h2>Your latest topics</h2>
{{#if topics.length }}
<ul>
{{#each topics}}
<li><a href="/topics/{{this}}">{{this}}</a></li>
{{/each}}
</ul>
{{else}}
<p>
No topics found, let's open a new one!
</p>
{{/if}}
<form id="go" method="get">
<h2>Open your topic</h2>
<input type="text" id="topic" name="topic" class="large" rows="10" placeholder="Enter the topic name"></input>
<input type="submit" class="btn primary" value="GO!"></input>
</form>
<!-- Begin MailChimp Signup Form -->
<form action="http://matteocollina.us2.list-manage.com/subscribe/post?u=200c4e2156160bb7b9d94e743&amp;id=71af41f393" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<h2>Subscribe to our mailing list</h2>
<input type="email" value="" name="EMAIL" placeholder="Enter your email here" id="mce-EMAIL">
<input type="submit" class="btn primary" value="Subscribe" name="subscribe"></input>
</form>
<!--End mc_embed_signup-->
</div>
</div>
<div class="row">
<div class="span13">
{{#markdown}}
NetworkButton Example
-----

NetworkButton is a forest of network enabled leds that switch on and off on simultaneosly.
It's also an example with MQTT-REST.
<div class="span4">
<!-- Begin MailChimp Signup Form -->
<form action="http://matteocollina.us2.list-manage.com/subscribe/post?u=200c4e2156160bb7b9d94e743&amp;id=71af41f393" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<h2>Mailing list</h2>
<div class="input-append">
<input type="email" class="input-large" value="" name="EMAIL" placeholder="Enter your email here" id="mce-EMAIL">
<input type="submit" class="btn btn-primary" value="Subscribe" name="subscribe"></input>
</div>
</form>
<!--End mc_embed_signup-->

Let's build your own!
<h2>Examples:</h2>
{{#markdown}}
* [Network Button](/examples/network_button)
* [House Temp Monitoring](/examples/house_temp_monitoring)
{{/markdown}}
<img src="/images/schema.png">
{{#notest}}
<script src="https://gist.github.com/1704547.js"> </script>
{{/notest}}
</div>
</div>
<script type="text/javascript">
$("#go").submit(function() {
var val = $("#topic").val()
if(val.length > 0) {
window.location = "/topics/" + val;
}
return false;
});
</script>
{{ js "home.js" }}
2 changes: 1 addition & 1 deletion app/views/layout.hbs
View file
Expand Up @@ -13,7 +13,7 @@
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="https://github.com/mcollina/qest"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<a class="hidden-phone" href="https://github.com/mcollina/qest"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Expand Down
17 changes: 17 additions & 0 deletions app/views/network_button.hbs
View file
@@ -0,0 +1,17 @@
<div class="row">
<div class="span13">
{{#markdown}}
NetworkButton Example
-----
NetworkButton is a forest of network enabled leds that switch on and off on simultaneosly.
It's also an example with MQTT-REST.
Let's build your own!
{{/markdown}}
<img src="/images/schema.png">
{{#notest}}
<script src="https://gist.github.com/1704547.js"> </script>
{{/notest}}
</div>
</div>
Binary file added public/images/grey.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit cbf5470

Please sign in to comment.