Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
181 lines (145 sloc) 3.16 KB
<head>
<title>Reader Aware Design Demo</title>
<script src="http://xoxco.com/js/jquery.min.js"></script>
<script src="aware.js"></script>
<script>
$(function() {
$().aware();
});
</script>
<style>
body {
font-family: 'helvetica';
}
#wrapper {
width: 90%;
max-width: 1024px;
margin: 0px auto;
overflow: visible;
text-align: center;
}
h1 {
font-size: 40px;
}
#time_of_day {
width: 50%;
}
#time {
font-weight: bold;
font-size: 60px;
margin:0;
}
/* Hide messages by default */
h1.morning, h1.afternoon, h1.nighttime {
display: none;
}
/* special styles for day time */
body.daytime {
color: #369;
background-color: #FFF;
}
body.morning {
background-image: -webkit-linear-gradient(#f1d97a 0%, #ffffff 25%)
}
body.morning.earlymorning {
background-color: #333;
background-image: -webkit-linear-gradient( #333 0%,#f1d97a 90%);
}
body.earlymorning h1,
body.earlymorning h2 {
color: #FFF;
}
.morning h1.morning {
display: block;
}
.morning .h1.earlymorning {
display: none;
}
.morning.earlymorning .h1.morning {
display: block;
}
.afternoon h1.afternoon {
display: block;
}
/* special styles for night time */
body.nighttime {
color: #fff;
background-color: #333;
}
body.nighttime h1,
body.nighttime h2 {
color: #610a8d;
}
body.nighttime a {
color: #8331cb;
}
.nighttime h1.nighttime {
display: block;
}
body.night {
background-image: -webkit-linear-gradient(#000 0%, #333 60%)
}
body.latenight {
background-image: -webkit-linear-gradient(#000 0%, #333 90%)
}
body.latenight h1 {
color:fuchsia;
}
body.latenight h2 {
color: #e806f7;
}
body.latenight a {
color: #07ff56;
}
</style>
<script>
$(function() {
function showTime(time) {
m = ' AM';
if (time >= 12 && time < 24) {
m = ' PM';
}
if (time > 12) {
time -= 12;
}
if (time == 0) {
time = 12;
}
time = time +m;
$('#time').html(time);
}
$('#time_of_day').on('change',function() {
$('body').removeClass();
showTime($(this).val());
$().time_of_day($(this).val());
});
$('#time_of_day').val(new Date().getHours());
showTime(new Date().getHours());
})
</script>
</head>
<body>
<div style="background: #5DACE2; color: #FFF; padding: 5px; text-align: right;">
Powered by Aware.js: <a href="http://xoxco.com/projects/code/aware/">Get the code</a>
</div>
<div id="wrapper">
<h1 class="morning">Good Morning!</h1>
<h1 class="afternoon">Good Afternoon!</h1>
<h1 class="nighttime">Good Evening!</h1>
<h1>
The design of this page<Br/>
responds to the time<br/>
where you're sitting right now.</h1>
<form>
<p>Change the time</p>
<p id="time">12</p>
<input id="time_of_day" type="range" min="0" max="24" />
</form>
<h2>Alter the layout or content of your site<br />
based on the time of day<br />
and a bunch of other "reader aware" attributes<br />
with no server side code:
</h2>
<h1><a href="http://xoxco.com/projects/code/aware/">Aware.js</a></h1>
</div>
</body>