Browse files

more updates

  • Loading branch information...
1 parent 9161cd6 commit 212f9e3d2057245205060ccb9c2c8cfb4d275f39 @fligtar fligtar committed Apr 9, 2010
Showing with 267 additions and 38 deletions.
  1. +147 −6 css/style.css
  2. +84 −26 index.php
  3. +35 −5 js/sprightly.js
  4. +1 −1 lib/sprightly.php
View
153 css/style.css
@@ -63,16 +63,157 @@ body {
background-color: #000000;
font-family: 'Meta';
color: #FFFFFF;
- padding: 10px;
+ padding: 1em;
}
+/* Header row */
header h1 {
- font-size: 30px;
+ font-size: 4em;
+ font-weight: bold;
+ float: left;
+}
+header section {
+ float: right;
+}
+#weather {
+ display: inline-block;
+ text-align: center;
+ margin-right: 2em;
+}
+#weather img {
+ display: block;
+}
+#weather span {
+ display: block;
+ margin-top: 0.2em;
+}
+#date-time {
+ display: inline-block;
+}
+#date {
+ display: block;
+ font-size: 1.5em;
+ text-align: right;
+}
+#time {
+ font-size: 3em;
+ display: block;
+}
+
+#content {
+ clear: both;
+ display: block;
+}
+
+/* Firefox */
+#firefox {
+ display: inline-block;
+ border: 1px solid red;
+}
+#firefox h1 {
+ color: #D64203;
+ font-size: 4em;
+}
+#firefox .downloads .count {
+ display: block;
+ text-align: right;
+ font-size: 3em;
+}
+#firefox .downloads .label {
+ display: block;
+ text-align: right;
+ font-size: 2em;
+}
+
+#firefox .tweets li {
+ clear: left;
+}
+#firefox .tweets li img {
+ float: left;
+}
+#firefox .tweets li span {
+ display: block;
}
+#firefox .tweets li a {
+
+}
+#firefox .tweets li a
+
-section {
+/* Transportation */
+#transportation {
+ display: inline-block;
+ vertical-align: top;
+}
+#transportation h1 {
+ font-size: 2em;
+}
+#traffic {
display: inline-block;
- background: rgba(255, 255, 255, 0.3);
- -moz-border-radius: 6px;
- padding: 5px;
+ vertical-align: top;
+}
+#traffic-map {
+ background: url(http://traffic.511.org/portalmap2.gif) no-repeat scroll -61px -143px transparent;
+ width: 293px;
+ height: 318px;
+ -moz-border-radius: 0.5em;
+}
+#traffic span {
+ font-size: 0.8em;
+ text-align: right;
+ display: block;
+}
+#caltrain {
+ display: inline-block;
+ background-color: rgba(255, 255, 255, 0.1);
+ -moz-border-radius: 0.5em;
+ padding: 1em;
+ vertical-align: top;
+}
+#caltrain h2 {
+ text-align: center;
+}
+#caltrain h2 .logo {
+ font-style: italic;
+ font-weight: bold;
+ font-family: Arial;
+ font-size: 1.2em;
+}
+#caltrain h2 .train {
+ background-color: #C71B1B;
+ -moz-border-radius: 7em;
+ padding: 0.4em 0;
+}
+#caltrain table {
+ padding: 1em;
+}
+#caltrain th {
+ text-align: center;
+ padding: 0.5em 1em;
+ color: #CCCCCC;
+}
+#caltrain td {
+ padding: 0.2em 0.5em;
+ vertical-align: middle;
+}
+#caltrain td.time {
+ font-size: 1.2em;
+ color: #CCCCCC;
+}
+#caltrain td.type {
+ text-transform: uppercase;
+ font-size: 0.9em;
+}
+#caltrain td.type.nb {
+ border-right: 1px solid #CCCCCC;
+ padding-right: 1.5em;
+}
+#caltrain td.time.sb {
+ padding-left: 1.5em;
+}
+#caltrain .bullet {
+ color: #C71B1B;
+}
+#caltrain .limited {
+ color: #C2732B;
}
View
110 index.php
@@ -9,40 +9,98 @@
<body>
<header>
<h1>mozilla</h1>
- <h2>Date</h2>
+
+ <section>
+ <div id="weather">
+ <img src="http://l.yimg.com/a/i/us/we/52/33.gif">
+ <span>Fair, 51 F</span>
+ </div>
+
+ <div id="date-time">
+ <span id="date">Thursday, April 8</span>
+ <span id="time">10:41 AM</span>
+ </div>
+ </section>
</header>
-
- <section id="firefox">
- <img src="images/firefox-128-noshadow.png">
- <h1>Firefox</h1>
- downloads
+
+ <section id="content">
+
+ <section id="firefox">
+ <img src="images/firefox-128-noshadow.png">
+ <h1>Firefox</h1>
+
+ <div class="downloads">
+ <div class="total">
+ <span class="count">3,134,124,124</span>
+ <span class="label">total downloads</span>
+ </div>
+
+ <div class="fx36">
+ <span class="count">134,124,124</span>
+ <span class="label">3.6 downloads</span>
+ </div>
+ </div>
- <div>
- Tweets @firefox
- </div>
- </section>
+ <div class="tweets">
+ <h2>Tweets @firefox</h2>
+ <ul>
+ <li><img src="http://a3.twimg.com/profile_images/266432199/13022009_005_-001_normal.jpg"><span>@someone</span>My <a href="#">@firefox</a> is seriously down for the count. I can't even uninstall it...lost all my bookmarks!! Grrrrr!!!</li>
+ </ul>
+ </div>
+ </section>
- <section>
- AMO stuff
- </section>
+ <section>
+ AMO stuff
+ </section>
- <section>
- Upcoming Events
- </section>
+ <section>
+ Upcoming Events
+ </section>
- <section id="transportation">
- <h1>Transportation</h1>
-
- <div>
- <img src="http://traffic.511.org/portalmap2.gif">
- </div>
+ <section id="transportation">
+ <h1>Transportation</h1>
- <div>
- <h2>Caltrain<h2>
+ <div id="traffic">
+ <div id="traffic-map"></div>
+ <span>updated 5 minutes ago</span>
+ </div>
- </div>
+ <div id="caltrain">
+ <h2>Mountain View <span class="logo">Cal<span class="train">train</span></span></h2>
+
+ <table>
+ <thead>
+ <tr>
+ <th colspan="2">San Francisco</th>
+ <th colspan="2">San Jos&eacute;</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td class="nb time">5:23</td>
+ <td class="nb type bullet">Bullet</td>
+ <td class="sb time">5:27</td>
+ <td class="sb type"></td>
+ </tr>
+ <tr>
+ <td class="nb time">5:23</td>
+ <td class="nb type limited">Limited</td>
+ <td class="sb time">5:27</td>
+ <td class="sb type bullet">Bullet</td>
+ </tr>
+ <tr>
+ <td class="nb time">5:23</td>
+ <td class="nb type"></td>
+ <td class="sb time">5:27</td>
+ <td class="sb type"></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </section>
</section>
-
+
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/sprightly.js"></script>
</body>
View
40 js/sprightly.js
@@ -1,5 +1,35 @@
-/*$(document).ready(function() {
- $.get('', function(data){
-
- });
-});*/
+$(document).ready(function() {
+ sprightly.refresh_minute();
+});
+
+var sprightly = {
+
+ refresh_minute: function() {
+ $.getJSON('data/minutely.txt', function(data) {
+ sprightly.update_firefox_downloads(data.firefox_downloads);
+ sprightly.update_firefox_tweets(data.firefox_tweets);
+ });
+ },
+
+ refresh_hour: function() {
+ $.getJSON('data/hourly.txt', function(data) {
+ sprightly.update_amo_downloads(data.amo_downloads);
+ sprightly.update_weather(data.weather);
+ sprightly.update_caltrain(data.caltrain);
+ });
+ },
+
+ // 5 min - caltrain and 511
+
+ update_firefox_downloads: function(data) {
+ $('#firefox .downloads .total .count').text(data.total + 1049319991);
+ $('#firefox .downloads .fx36 .count').text(data.total);
+ },
+
+ update_firefox_tweets: function(data) {
+ $.each(data, function(i, tweet) {
+ $('#firefox .tweets ul').prepend('<li class="hidden"><img src="' + tweet.avatar + '" /><span>' + tweet.author + '</span>' + tweet.text + '</li>');
+ });
+ }
+
+};
View
2 lib/sprightly.php
@@ -77,7 +77,7 @@ public function caltrain() {
}
public function firefox_tweets() {
- $xml = $this->load_url('http://search.twitter.com/search.atom?lang=en&q=%40firefox');
+ $xml = $this->load_url('http://search.twitter.com/search.atom?lang=en&q=%40firefox+OR+%23firefox');
$data = new SimpleXMLElement($xml);
$tweets = array();

0 comments on commit 212f9e3

Please sign in to comment.