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
|
<!doctype html>
<html manifest="manifest.appcache">
<head>
<meta charset=utf-8>
<title>Symbolistic!</title>
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<link rel=stylesheet href='style.css'>
<!--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('time').style.display='block';
}
function destroycharms() {
document.getElementById('charmsbar').style.display='none';
document.getElementById('datetime').style.display='none';
document.getElementById('time').style.display='none';
}
function start(){
document.getElementById('startbutton').style.display='block';
}
function destroystart() {
document.getElementById('startbutton').style.display='none';
}
</script>
</head>
<body class=s-w>
<div id="splashscreen"></div>
<div id=start class=modal>
<p class=sp></p>
<div>
<h1>Symbolistic!</h1>
<p>Match the shape by selecting correct symbols.<br/>
Each correct match gives you points and additional time, so be quick!</p>
<button id=bS>Click to Start</button>
</div>
</div>
<div id=gameover class=modal>
<p class=sp></p>
<div>
<h2>You symbolistic, you! \o/</h2>
<p>
In total, you got <strong><span id=goPoints></span> points</strong> and survived for <strong><span id=goSeconds></span> seconds</strong>!
<span id=goHigh><br/>Your highest score so far has been <span id=goHighPoints></span> points</span>
</p>
<button id=bA>Play again</button>
or <a id=twBrag href="" target=_blank>Twitter brag �</a>
</div>
</div>
<header>
<span>Look for</span><span id=answer>?</span>
<span>Time</span><span id=stopwatch>00:00:00</span>
<span>Points</span><span id=points>00</span>
</header>
<div id=tiles>
</div>
<footer>
</footer>
<audio id=sClick>
<source src="click.mp3">
</audio>
<!-- 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="settingsc()"/><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="time"></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('time').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>
<script defer src='script.js'></script>
</body>
</html>
|
