Permalink
Browse files

Initial prototyping, dashboard page

  • Loading branch information...
caseman committed Oct 8, 2011
0 parents commit d93ce2171315fd9cb52f266aed9433a41ff94442
@@ -0,0 +1,11 @@
+MANIFEST
+build
+dist
+doc/build
+doc/tutorial
+env
+*.pyc
+*.egg
+*.egg-info
+.coverage
+.DS_Store
0 README
No changes.
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Super Sample App - Johnny5 Dashboard</title>
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+
+ <link rel="stylesheet" href="j5.css" type="text/css" media="screen" charset="utf-8">
+</head>
+<body>
+ <div class="top-bar">
+ <h1>
+ <!--<img src="icons/johnny5.jpg" width="42" height="42" />-->
+ &nbsp;
+ Super Sample App
+ </h1>
+ <div class="actions">
+ <img src="icons/run.png" title="Run App" width="32" height="32"/>
+ &nbsp;&nbsp;<img src="icons/undo.png" title="Undo Changes" width="32" height="32"/>
+ &nbsp;&nbsp;<img src="icons/more.png" title="More Actions" width="32" height="32"/>
+ </div>
+ </div>
+ <br style="clear: both"/>
+
+ <div class="component">
+ <div class="title">
+ Views
+ <a href="#" class="help"><img src="icons/help.png" width="24" height="24" border="0" />
+ <span>more info</span>
+ </a>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/home-view.png"/>
+ <span class="name">Home</span>
+ <span class="descr">Initial application view</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/view.png"/>
+ <span class="name">Preferences</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/view.png"/>
+ <span class="name">View Document</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/view.png"/>
+ <span class="name">Edit Document</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/add.png" alt="Add view" />
+ <span class="action">Add a new view...</span>
+ </div>
+ </div>
+
+ <div class="component">
+ <div class="title">
+ Widgets
+ <a href="#" class="help"><img src="icons/help.png" width="24" height="24" border="0" />
+ <span>more info</span>
+ </a>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/widget.png"/>
+ <span class="name">Fancypants Text Editor</span>
+ <span class="descr">Text editor for styled text</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/widget.png"/>
+ <span class="name">Spellcheck</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/widget.png"/>
+ <span class="name">Disqus</span>
+ <span class="descr">Embeds comments hosted by Disqus</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/add.png" alt="Add view" />
+ <span class="action">Add a new widget...</span>
+ </div>
+ </div>
+
+ <div class="component">
+ <div class="title">
+ Stores
+ <a href="#" class="help"><img src="icons/help.png" width="24" height="24" border="0" />
+ <span>more info</span>
+ </a>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/local-store.png"/>
+ <span class="name">local web storage</span>
+ <span class="descr">HTML5 local storage (stored by browser)</span>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/file-store.png"/>
+ <span class="name">app-server</span>
+ <span class="descr">File server at <tt>app.supersample.org/app-server</tt></span>
+ <a href="#store,app-server" class="status">connected</a>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/remote-store.png"/>
+ <span class="name">super-sample-docs</span>
+ <span class="descr">Couchdb database server at <tt>docs.supersample.org</tt></span>
+ <a href="#store,super-sample-reports" class="status">connected</a>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/remote-store.png"/>
+ <span class="name">super-sample-reports</span>
+ <span class="descr">PostgreSQL database server at <tt>pgsql.supersample.org</tt></span>
+ <a href="#store,super-sample-reports" class="status">connected</a>
+ </div>
+ <div class="item">
+ <img class="icon" src="icons/add.png" alt="Add store" />
+ <span class="action">Add a new store...</span>
+ </div>
+ </div>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,131 @@
+* {
+ margin: 0;
+}
+
+body {
+ font-family: 'Open Sans', helvetica, arial, sans-serif;
+ background: url('images/background.png');
+}
+
+.top-bar {
+ background-image: url("icons/johnny5.jpg");
+ background-repeat: no-repeat;
+ background-color: white;
+ border-bottom: 2pt solid #ccc;
+ height: 40px;
+ box-shadow: -5px 1px 15px #555;
+}
+
+h1 {
+ float: left;
+ margin: 5px;
+ font-size: 1.25em;
+ font-weight: 300;
+ -moz-border-radius: 16px;
+ -webkit-border-radius: 16px;
+ border-radius: 16px;
+ left: 4.5em;
+ position: relative;
+}
+
+.title {
+ padding: 5px;
+ background-color: #858F99;
+ font-size: 1.15em;
+ font-weight: 300;
+}
+
+.help {
+ float: right;
+ text-decoration: none;
+ font-size: 0.7em;
+ margin-right: 7px;
+}
+
+.help:hover {
+ text-decoration: underline;
+}
+
+.help span {
+ position: relative;
+ top: -0.6em;
+}
+
+.actions {
+ padding: 5px;
+ background: black;
+ -moz-border-radius: 0 0 0 18px;
+ -webkit-border-radius: 0 0 0 18px;
+ border-radius: 0 0 0 18px;
+ position: fixed;
+ right: 0%;
+ z-index: 999;
+ box-shadow: -1px 1px 10px #fff;
+}
+
+.component {
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ margin-bottom: 1em;
+ border: solid 2pt #aaa;
+ background-color: #cde;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+ min-width: 300px;
+ max-width: 600px;
+ float: left;
+ box-shadow: 2px 2px 10px #bbb;
+}
+
+.component h2 {
+ margin: 0.25em;
+}
+
+.component .item {
+ padding: 0.25em;
+ border-top: 1pt solid #eee;
+ clear: both;
+ min-height: 68px;
+ background: #ccddee; /* Old browsers */
+ background: -moz-linear-gradient(top, #ccddee 0%, #bac9d8 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccddee), color-stop(100%,#bac9d8)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #ccddee 0%,#bac9d8 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #ccddee 0%,#bac9d8 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #ccddee 0%,#bac9d8 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccddee', endColorstr='#bac9d8',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #ccddee 0%,#bac9d8 100%); /* W3C */
+}
+
+.component .item:hover {
+ background: #aaccee; /* Old browsers */
+ background: -moz-linear-gradient(top, #ccddee 0%, #aaccee 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccddee), color-stop(100%,#aaccee)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #ccddee 0%,#aaccee 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #ccddee 0%,#aaccee 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #ccddee 0%,#aaccee 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccddee', endColorstr='#aaccee',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #ccddee 0%,#aaccee 100%); /* W3C */
+}
+
+.component .name {
+ display: block;
+ font-weight: bold;
+ margin-top: 0.5em;
+}
+
+.component .status {
+ display: block;
+}
+
+.component .icon {
+ float: left;
+ margin-right: 0.5em;
+}
+
+.component .action {
+ display: block;
+ font-weight: bold;
+ margin-top: 1.5em;
+}
+

0 comments on commit d93ce21

Please sign in to comment.