Skip to content
Browse files

More demo page work

  • Loading branch information...
1 parent 5071335 commit 28ff837360841fd43973780e31f14c69be65ed2e bitpshr committed Dec 15, 2012
View
119 demo/app.css
@@ -1,119 +0,0 @@
-@import url(http://fonts.googleapis.com/css?family=Righteous);
-
-body {
- padding-bottom: 40px;
-}
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) {
- body{
- padding:0 !important;
- }
-
- .top{
- padding: 0 10px 0 10px !important;
- }
-
- .top h1{
- font-size:84px !important;
- }
-
- .sectionTitle{
- font-size:40px !important;
- }
-}
-
-/* Landscape phones and down */
-@media (max-width: 480px) {
- body{
- padding:0 !important;
- }
-
- .top{
- padding: 0 10px 0 10px !important;
- }
-
- .top h1{
- font-size:84px !important;
- }
-
- .sectionTitle{
- font-size:40px !important;
- }
-}
-
-.download {
- margin-top:35px;
-}
-
-/* Custom container */
-.container-narrow {
- margin: 0 auto;
- max-width: 700px;
-}
-
-.container-narrow > hr {
- margin: 30px 0;
-}
-
-.row-fluid{
- margin-bottom:30px;
-}
-
-.dark{
- background: #F7F7F7;
- padding-bottom:30px;
-}
-
-.light {
- padding-bottom:30px;
-}
-
-.top {
- background:#282828;
-}
-
-pre{
-
-}
-
-.top h1{
- color:#FFF;
- font-family: 'Righteous', cursive;
- font-size:180px;
- display:block;
- margin-bottom:15px;
- line-height:1;
- text-shadow: -1px -1px 0px #333;
-}
-
-.top p{
- color:#999;
- text-shadow: -1px -1px 0px #333;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
- margin: 40px 0;
- text-align: center;
-}
-.jumbotron .btn {
- font-size: 21px;
- padding: 14px 24px;
-}
-
-.sectionTitle{
- line-height: 100%;
- font-style: italic;
- font-family: Georgia, Times New Roman, serif;
- font-size:70px;
- padding:10px;
- font-weight: normal;
- text-shadow: -1px -1px 0px #666;
- margin-top:25px;
-}
-
-.accent{
- color: #FF7F00;
- font-weight:bold;
-}
View
53 demo/css/app.css
@@ -1,22 +1,43 @@
@import url(http://fonts.googleapis.com/css?family=Righteous);
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700);
body {
- padding-bottom: 40px;
+
}
.download {
- margin-top:35px;
+ margin-top:70px;
}
.container-narrow {
margin: 0 auto;
max-width: 700px;
+ padding:0px 10px;
+}
+
+.lead{
+ margin-bottom:0px !important;
+}
+
+.container-really-narrow {
+ max-width: 500px !important;
+ margin: 0px auto;
}
.container-narrow > hr {
margin: 30px 0;
}
+.sample{
+ margin-bottom:15px;
+}
+
+iframe{
+ margin-top:30px;
+ margin-bottom:20px;
+ display:block;
+}
+
.row-fluid{
margin-bottom:30px;
}
@@ -36,21 +57,26 @@ body {
.top h1{
color:#FFF;
- font-family: 'Righteous', cursive;
- font-size:180px;
+ font-family: 'Source Sans Pro', sans-serif;
+ font-size:130px;
display:block;
margin-bottom:15px;
line-height:1;
text-shadow: -1px -1px 0px #333;
}
.top p{
- color:#999;
- text-shadow: -1px -1px 0px #333;
+ -webkit-font-smoothing: antialiased;
+ color: white;
+ font-family: 'Source Sans Pro';
+ font-size: 45px;
+ font-weight: 300;
+ line-height: 53.75px;
+ text-shadow: -1px -1px 0px #222;
}
.jumbotron {
- margin: 40px 0;
+ margin: 20px 0;
text-align: center;
}
.jumbotron .btn {
@@ -69,6 +95,13 @@ body {
margin-top:25px;
}
+h3{
+ font-family: Georgia, Times New Roman, serif !important;
+ font-weight: normal;
+ font-style: italic;
+ color:#777;
+}
+
.accent{
color: #FF7F00;
font-weight:bold;
@@ -77,7 +110,8 @@ body {
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body{
- padding:0 !important;
+ padding-left:0 !important;
+ padding-right:0 !important;
}
.top{
@@ -96,7 +130,8 @@ body {
/* Landscape phones and down */
@media (max-width: 480px) {
body{
- padding:0 !important;
+ padding-left:0 !important;
+ padding-right:0 !important;
}
.top{
View
BIN demo/css/img/error.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demo/css/img/log.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demo/css/img/success.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
81 demo/index.html
@@ -16,67 +16,86 @@
</head>
<body>
<div class="container-fluid top">
- <div class="container-narrow">
- <div class="jumbotron">
+ <div class="jumbotron">
+ <div class="container-really-narrow">
<h1>Holler.js</h1>
- <p class="lead">real-time, in-app notifications for web and mobile via the command line</p>
- <iframe src="http://player.vimeo.com/video/55331511?badge=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
- <a class="download btn btn-large btn-success" href="https://github.com/bitpshr/holler">Download on GitHub</a>
</div>
+ <p class="lead">real-time, in-app notifications for web and mobile via the command line</p>
+ <p class="container-really-narrow hidden-phone">
+ <iframe src="http://player.vimeo.com/video/55331511?badge=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen ></iframe>
+ </p>
+ <a class="download btn btn-large btn-success" href="https://github.com/bitpshr/holler">Download on GitHub</a>
</div>
</div>
<div class="container-fluid dark">
<div class="container-narrow">
- <h1 class="sectionTitle"><span class="accent">1.</span> Set stuff up</h1>
- <p>
- Holler is built with <strong>Node</strong> and uses <strong>Faye</strong> for communication. If you don't have Node yet, <a href="http://nodejs.org/">install the hell out of it</a>. After doing so, the <code>npm</code> command should be available via the command line. Then we just install Faye:
- </p>
- <p>
+ <h1 class="sectionTitle"><span class="accent">1.</span> Set stuff up</h1>
+ <p>
+ Holler is built with <a href="http://nodejs.org/">Node</a>, uses <a href="http://faye.jcoglan.com/">Faye</a> for communication, and uses <a href="http://fabien-d.github.com/alertify.js/">Alertify</a> for notifications. If you don't have Node yet, <a href="http://nodejs.org/">install the hell out of it</a>. After doing so, the <code>npm</code> command should be available via the command line. Then we just install Faye:
+ </p>
+ <p>
<pre>npm install faye</pre>
- </p>
+ </p>
</div>
</div>
<div class="container-fluid light">
<div class="container-narrow">
- <h1 class="sectionTitle"><span class="accent">2.</span> Require some JS</h1>
- <p>
- On the client, Holler can be easily configured to use a specific host and port regardless of the app's http server. This is done via a global <code>hollerConfig</code> object. The <code>holler-client.js</code> script tag should then be included:
- </p>
- <p>
+ <h1 class="sectionTitle"><span class="accent">2.</span> Require some JS</h1>
+ <p>
+ On the client, Holler can be easily configured to use a specific host and port regardless of the app's http server. This is done via a global <code>hollerConfig</code> object. The <code>holler-client.js</code> script tag should then be included:
+ </p>
+ <p>
<pre>&lt;script&gt;
var hollerConfig = {
host: "http://127.0.0.1",
port: "1337"
}
&lt;/script&gt;
&lt;script type="text/javascript" src="PATH/TO/holler-client.min.js"&gt;&lt;/script&gt;</pre>
- </p>
- <p>
- <span class="label label-info">Heads up!</span> The hollerConfig object is optional. If it is not defined, the host will default to 127.0.0.1 and the port will default to 1337.
- </p>
+ </p>
+ <p>
+ <span class="label label-info">Heads up!</span> The hollerConfig object is optional. If it is not defined, the host will default to 127.0.0.1 and the port will default to 1337.
+ </p>
</div>
</div>
<div class="container-fluid dark">
<div class="container-narrow">
- <h1 class="sectionTitle"><span class="accent">3.</span> Start a server</h1>
- <p>
- The server can be started with an optional port. If no port is specified, it will be defaulted to 1337.
- </p>
- <p>
+ <h1 class="sectionTitle"><span class="accent">3.</span> Start a server</h1>
+ <p>
+ The server can be started with an optional port. If no port is specified, it will be defaulted to 1337.
+ </p>
+ <p>
<pre>cd path/to/holler/src
node holler-server.js 1337</pre>
- </p>
+ </p>
</div>
</div>
<div class="container-fluid light">
<div class="container-narrow">
- <h1 class="sectionTitle"><span class="accent">4.</span> Holler stuff</h1>
- <p>
-<pre>cd path/to/holler/src
-node holler.js http://yourServerUrl:port log "New software available in Downloads."</pre>
- </p>
+ <h1 class="sectionTitle"><span class="accent">4.</span> Holler stuff</h1>
+ <p>
+ Show notifications to all users currently using your app in real-time using <code>holler.js</code>. Notifications use <a href="http://fabien-d.github.com/alertify.js/">Alertify</a> so they look nice and sexy.
+ </p>
+ <p>
+ <h3>Log Messages</h3>
+ <img src="css/img/log.png" class="sample"/>
+<pre>node holler.js http://yourServerUrl:port log "This is a standard log message."</pre>
+ </p>
+ <p>
+ <h3>Success Messages</h3>
+ <img src="css/img/success.png" class="sample"/>
+<pre>node holler.js http://yourServerUrl:port success "This is a success message."</pre>
+ </p>
+ <p>
+ <h3>Error Messages</h3>
+ <img src="css/img/error.png" class="sample"/>
+<pre>node holler.js http://yourServerUrl:port error "This is an error message."</pre>
+ </p>
</div>
</div>
+ <div class="footer">
+ Copyright
+ </div>
<script>
var hollerConfig = {
host: "http://127.0.0.1",
View
81 demo/jquery.fitvids.js
@@ -1,81 +0,0 @@
-/*global jQuery */
-/*jshint multistr:true browser:true */
-/*!
-* FitVids 1.0
-*
-* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
-* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
-*
-* Date: Thu Sept 01 18:00:00 2011 -0500
-*/
-
-(function( $ ){
-
- "use strict";
-
- $.fn.fitVids = function( options ) {
- var settings = {
- customSelector: null
- };
-
- var div = document.createElement('div'),
- ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
-
- div.className = 'fit-vids-style';
- div.innerHTML = '&shy;<style> \
- .fluid-width-video-wrapper { \
- width: 100%; \
- position: relative; \
- padding: 0; \
- } \
- \
- .fluid-width-video-wrapper iframe, \
- .fluid-width-video-wrapper object, \
- .fluid-width-video-wrapper embed { \
- position: absolute; \
- top: 0; \
- left: 0; \
- width: 100%; \
- height: 100%; \
- } \
- </style>';
-
- ref.parentNode.insertBefore(div,ref);
-
- if ( options ) {
- $.extend( settings, options );
- }
-
- return this.each(function(){
- var selectors = [
- "iframe[src*='player.vimeo.com']",
- "iframe[src*='www.youtube.com']",
- "iframe[src*='www.youtube-nocookie.com']",
- "iframe[src*='www.kickstarter.com']",
- "object",
- "embed"
- ];
-
- if (settings.customSelector) {
- selectors.push(settings.customSelector);
- }
-
- var $allVideos = $(this).find(selectors.join(','));
-
- $allVideos.each(function(){
- var $this = $(this);
- if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
- var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
- width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
- aspectRatio = height / width;
- if(!$this.attr('id')){
- var videoID = 'fitvid' + Math.floor(Math.random()*999999);
- $this.attr('id', videoID);
- }
- $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
- $this.removeAttr('height').removeAttr('width');
- });
- });
- };
-})( jQuery );

0 comments on commit 28ff837

Please sign in to comment.
Something went wrong with that request. Please try again.