diff --git a/app/assets/css/main.css.less b/app/assets/css/main.css.less index 3e04897..a733a21 100644 --- a/app/assets/css/main.css.less +++ b/app/assets/css/main.css.less @@ -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; + } + } diff --git a/app/assets/js/home.js b/app/assets/js/home.js new file mode 100644 index 0000000..627f36a --- /dev/null +++ b/app/assets/js/home.js @@ -0,0 +1,10 @@ + +$(document).ready(function() { + $("#go").submit(function() { + var val = $("#topic").val() + if(val.length > 0) { + window.location = "/topics/" + val; + } + return false; + }); +}); diff --git a/app/views/home.hbs b/app/views/home.hbs index 755791f..8f5918f 100644 --- a/app/views/home.hbs +++ b/app/views/home.hbs @@ -1,24 +1,42 @@ -
-

QEST

+ +
+
+

+
+

QEST

+
+

Open your topic

+
+ + +
+
+
+
+

Your latest topics

+ {{#if topics.length }} +
    + {{#each topics}} +
  • {{this}}
    • + {{/each}} +
+ {{else}} +

+ No topics found, let‘s open a new one! +

+ {{/if}} +
+

+
+
-
+
+

Building

{{#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 }' \ @@ -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}} +
-~ Matteo +
-{{/markdown}} +

Dreaming

+{{#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}}
-
-

Your latest topics

- {{#if topics.length }} -
    - {{#each topics}} -
  • {{this}}
    • - {{/each}} -
- {{else}} -

- No topics found, let's open a new one! -

- {{/if}} -
-

Open your topic

- - -
- -
-

Subscribe to our mailing list

- - -
- -
-
-
-
-{{#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. +
+ +
+

Mailing list

+
+ + +
+
+ -Let's build your own! +

Examples:

+{{#markdown}} +* [Network Button](/examples/network_button) +* [House Temp Monitoring](/examples/house_temp_monitoring) {{/markdown}} - - {{#notest}} - - {{/notest}}
- - +{{ js "home.js" }} diff --git a/app/views/layout.hbs b/app/views/layout.hbs index 6c83db4..f33cb24 100644 --- a/app/views/layout.hbs +++ b/app/views/layout.hbs @@ -13,7 +13,7 @@
- Fork me on GitHub + Fork me on GitHub diff --git a/app/views/network_button.hbs b/app/views/network_button.hbs new file mode 100644 index 0000000..3ae723c --- /dev/null +++ b/app/views/network_button.hbs @@ -0,0 +1,17 @@ +
+
+{{#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}} + + {{#notest}} + + {{/notest}} +
+
diff --git a/public/images/grey.png b/public/images/grey.png new file mode 100644 index 0000000..31eb0e8 Binary files /dev/null and b/public/images/grey.png differ