1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Calendar</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script src="lib.js"></script>
<!--Stylesheet that styles the charms bar and the startbutton -->
<link rel="stylesheet" href="css/charms.css"/>
<!--Script that powers the charms bar-->
<script>
function charms(){
document.getElementById('charmsbar').style.display='block';
document.getElementById('datetime').style.display='block';
document.getElementById('ctime').style.display='inline';
}
function destroycharms() {
document.getElementById('charmsbar').style.display='none';
document.getElementById('datetime').style.display='none';
document.getElementById('ctime').style.display='none';
}
function start(){
document.getElementById('startbutton').style.display='block';
}
function destroystart() {
document.getElementById('startbutton').style.display='none';
}
</script>
<script>
var settingscharms = 'document.getElementById('settingscharms')'
</script>
</head>
<body class="dark">
<div id="splashscreen"></div>
<div id="calendar-wrap" class="box">
<div id="calendar">
<h1 id="calendar-title"> </h1>
<ul id="controls">
<li><a href="#" id="btn-previous"></a></li>
<li><a href="#" id="btn-today">Today</a></li>
<li><a href="#" id="btn-next"></a></li>
</ul>
<div class="clear"> </div>
<h3 id="time"> </h3>
<table id="table">
<thead>
</thead>
<tbody>
</tbody>
</table>
<div class="clear"> </div>
<span id="stats"></span>
<!--<p class="info">
Click on a date to view events. Use arrow keys to browser the calendar.
</p>
<div class="clear"> </div-->
</div>
<div class="clear"> </div>
</div>
<div id="diary-wrap" class="box">
<div class="content">
<a href="#" id="diary-close"></a>
<h2 id="diary-title"> </h2>
<div class="clear"> </div>
<ul id="diary"></ul>
<p class="info">Click on a time to add an event</p>
</div>
</div>
<div id="dialog">
<a href="" id="dialog-close"/></a>
<form id="add" class="target">
<h2 id="event-date"></h2>
<p class="time">
<label>Event time</label>
Hour <select id="event-hour"></select>
Minute <select id="event-minute"></select>
</p>
<p>
<label>Event description</label>
<input type="text" id="event-description" maxlength="100" />
</p>
<div id="event-label">
</div>
<p class="buttons">
<input type="submit" id="event-create" value="ok" class="button" />
<input type="button" id="event-close" value="cancel" class="button" />
<input type="button" id="event-delete" value="delete" class="button" />
<input type="button" id="event-tweet" value="tweet" class="button" />
</p>
</form>
<div id="ical2" class="target">
Copy the text and save it as calendar.ics file.<br />
<small>You can then import the file to Google Calendar, iCal etc.</small>
<textarea id="ical-data2"> </textarea>
</div>
</div>
<div class="clear"> </div>
<!-- CHARMS BAR CODE -->
<div id="hoverarea" onmouseover="charms()" class="hotcorner">
</div>
<div id="charmsbar" onmouseover="charms()" onmouseout="destroycharms()">
<img src="../../common/img/charmsbar/search.png" onmouseover="this.src='../../common/img/charmsbar/search-hover.png'" onmouseout="this.src='../../common/img/charmsbar/search.png'"/><br/>
<img src="../../common/img/charmsbar/share.png" onmouseover="this.src='../../common/img/charmsbar/share-hover.png'" onmouseout="this.src='../../common/img/charmsbar/share.png'"/><br/>
<a href="../../start/index.html"><img src="../../common/img/charmsbar/start.png" onmouseover="this.src='../../common/img/charmsbar/start-hover.png'" onmouseout="this.src='../../common/img/charmsbar/start.png'"/></a><br/>
<img src="../../common/img/charmsbar/devices.png" onmouseover="this.src='../../common/img/charmsbar/devices-hover.png'" onmouseout="this.src='../../common/img/charmsbar/devices.png'"/><br/>
<img src="../../common/img/charmsbar/settings.png" onmouseover="this.src='../../common/img/charmsbar/settings-hover.png'" onmouseout="this.src='../../common/img/charmsbar/settings.png'" onclick="settingscharms.style.display='block'"/><br/>
</div>
<div id="datetime">
<img src="../../common/img/network.png" id="iconnetwork" height="24px" width="24px"/>
<img src="../../common/img/battery.png" id="iconbattery"/>
<span id="ctime"></span>
<script language="javascript" type="text/javascript">
<!-- Begin
function clock() {
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = hours + ":" + minutes ;
document.getElementById('ctime').innerHTML = dispTime;
setTimeout("clock()", 1000);
}
window.onload=clock;
// End -->
</script>
<div id="date"><script language="Javascript">
var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
var now = new Date
document.write("" + dayName[now.getDay()] + "<br/>" +"<span id=month>" + monName[now.getMonth()] + " "+now.getDate() +"")
</script>
</div>
</div>
<div id="bottomhoverarea" onmouseover="charms()" class="hotcorner">
</div>
<div id="starthoverarea" onmouseover="start()" class="hotcorner">
</div>
<div id="startbutton" onmouseout="destroystart()">
<a href="../../start/index.html"><img src="../../common/img/start.png"/></a>
</div>
<div id="settingscharms">
<img src="img/close.png" class="closecharms" onclick="settingscharms.style.display='none'"/>
<span class="cheading1">Settings</span>
<span class="cheading2d">Calendar</span>
<span class="cheading2">Theme</span>
<a href="#" id="btn-theme">light</a>
<span class="cheading2">Get as iCal</span>
<a href="#" id="btn-ical">Click here to show code</a>
<div id="ical">
<textarea id="ical-data"></textarea>
</div>
</div>
</body>
</html>
|
