Mercurial > code > home > repos > homeauto

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>wallscreen</title>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400' rel='stylesheet' type='text/css'></link>
      <style type="text/css" media="all">
	/* <![CDATA[ */
	body {
	    background: black;
	    margin: 0;
	}
	p, ul {
	    margin: 0;
	}
	#edge {
	    position: absolute;
	    left: 14px;
	    top: 11px;
	    width: 463px;
	    height: 680px;

	    background: black;
	    color: gray;
	    font-size: 30px;
	    line-height: 25px;
	    font-family: 'Yanone Kaffeesatz', sans-serif;
	    overflow: hidden;
	}

	#edge.rot {
	    left: 113px;
	    top: -101px;
	    transform: rotate(90deg);
	    width: 463px;
	    height: 680px;
	}

	@media screen and (-webkit-min-device-pixel-ratio:0) {
	    #edge { border: 1px solid red; }
	}

	#clock {
    bottom: 25px;
    color: #4E8B4E;
    font-size: 56px;
    line-height: 63px;
    position: absolute;
    right: 5px;
    text-align: right;
    width: 134px;
	}

	#todo {
	    width: 70%;
	    height: 60%;
	    overflow: hidden;
	}
	#todo h1 {

	}
	.fg2 {
	    color: #2a2aa8;
	}
	.depth0 { padding-left: 0px; color: #fff; background: #1f2324}
	.depth1 { padding-left: 20px; color: #777; }
	.depth2 { padding-left: 40px; color: #3c3535; }
	.depth3 { padding-left: 60px; color: #221e1e; }

	#events {
	    width: 70%;
	    height: 25%;
	    overflow: hidden;
	}
	#events > ul > li {
	    list-style: none;
	    margin-left: -26px;
	}
	#events h2 {
	    margin: 0;
	    padding: 0;
	    font-weight: normal;
	    font-size: 100%;
	    padding-left: 27px;
	    background: url(static/Free%20Blockie%20Set/Blue%20Glass/PNG%2024/calendar.png) no-repeat;

	}

	#events li.today h2 {
	    background: url(static/Free%20Blockie%20Set/Golden/PNG%2024/calendar.png) no-repeat;

	}
	li.timeEvent {
	    list-style: none;
	    margin-left: -26px;
	    padding-left: 27px;
	    background: url(static/Free%20Blockie%20Set/Blue%20Glass/PNG%2024/clock.png) no-repeat;
	}

	.today .timeEvent {
	    background: url(static/Free%20Blockie%20Set/Golden/PNG%2024/clock.png) no-repeat;

	}
	h2 .dayName {
	    color: #666688;
	    font-size: 70%;
	}

	#events > ul > li {
	    padding: 4px;
	}
	#events > li.today {
	    background: #432;
	    color: white;
	}
#map {
height: 8%;
width: 70%;
overflow: hidden;
background: #111;
position: relative;
}

#thermostat {
position: absolute;
left: 8px;
top: 640px;
}
#status {
  color: red;
    left: 100px;
    position: absolute;
    top: 100px;
}

#map span.person {
  position: absolute;
  display: inline-block;
  border-radius: 10px;
  border: 1px solid gray;
  background: rgba(21, 26, 21, 0.55);
  width: 1em;
  height: 1em;
  text-align: center;
}
	/* ]]> */
      </style>

  </head>
  <body>
    <div id="edge" class="rot">
      <div id="clock">..:..</div>

      <div id="todo">
	<p>Todo list:</p>
	<ul data-bind="foreach: tasks">
	  <li data-bind="attr: {class: ('depth'+depth+' '+(mark || ''))}">
	    <span data-bind="text: content"></span>
	  </li>
	</ul>
      </div>

      <div id="events">
	<p>Calendar:</p>
	<ul data-bind="foreach: events">
	  <li data-bind="css: {today: $root.isToday($data)}">
	    <h2>
	      <span data-bind="text: date"></span>
	      <span class="dayName" data-bind="text: weekdayName"></span>
	    </h2>
	    <ul>
	      <!-- ko foreach: dayEvents -->
	      <li><span data-bind="text: title"></span></li>
	      <!-- /ko -->
	      <!-- ko foreach: timeEvents -->
	      <li class="timeEvent"><span class="time" data-bind="text: time"></span> <span data-bind="text: title"></span></li>
	      <!-- /ko -->
	    </ul>
	  </li>
	</ul>
      </div>
      <div id="map">
        <span class="place">&#8962;</span>
        <!-- ko foreach: mapPersonData -->
        <span class="person" data-bind="text: initial, style: {left: (frac*100+'%'), top: (topFrac*100+'%')}"></span>
        <!-- /ko -->
      </div>
      <div id="thermostat">
        Thermostat at <span style="color: #FAB1FA;" data-bind="text: requestedF"></span>. Use knob to adjust.
      </div>
      <div id="status"></div>

    </div>
<script src="static/jquery-1.8.3.min.js"></script>
<script src="static/underscore-1.4.2.min.js"></script>
<script src="static/knockout-2.1.0.min.js"></script>
<script src="static/moment.min.js"></script>
<script src="websocket.js"></script>
<script src="gui.js"></script>
  </body>
</html>
author	drewp@bigasterisk.com
date	Tue, 10 Sep 2013 00:36:52 -0700
parents	85d12376b415
children	d379351d398d