-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathMiniCon.html
71 lines (66 loc) · 2.55 KB
/
MiniCon.html
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
<html>
<head>
<title>Anaglyphs @ Mini-Con 2023</title>
<link href="styles/Anaglyphs.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function cycleBox() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}
</script>
<center>
<br>
<table width="100%"><tr><td>
<div class="header-img-blue" align="center">
<a href="https://www.facebook.com/events/272347605473393"target="_blank">
<img src="images/MiniConLogo.png" height="120" valign="middle" hspace="25"></a>
<a href="http://www.orcsgirls.org" target="_blank">
<img src="images/OrcsGirlsLogo.png" height="100" hspace="25" valign="middle"></a>
<br clear="all">
</div>
<p align="center"></p>
<div id="container" class="white">
<div class="boxes" align="center">
<img src="images/Example-Red.png" height="400"></a>
<p align="right">First image is red - check with your red-cyan glasses.
Close each eye. What do you see? -
<a href="#" onclick="cycleBox();">Next step</a>
</p>
</div>
<div class="boxes" align="center" style="display:none;">
<img src="images/Example-Cyan.png" height="400"></a>
<p align="right">Second image is cyan - check with your red-cyan glasses,
Close each eye. What changed? -
<a href="#" onclick="cycleBox();">Next step</a>
</p>
</div>
<div class="boxes" align="center" style="display:none;">
<img src="images/Example.png" height="400"></a>
<p align="right">Combining both images - do you see it in 3D? -
<a href="#" onclick="cycleBox();">Return to beginning</a>
</p>
</div>
</div>
<div class="large" align="center">
Ready? Click to start the <a href="DrawingPad.html">3D Drawing Tool</a>
</div>
<p align="left" class="footer"><a href="https://github.com/tproffen/Anaglyphs" target="_blank">Code on Github</a> -
<a href="images/MiniCon-Sheet.pdf" target="_blank">Instruction sheet</a>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License"
style="border-width:0" align="right" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"/></a>
</p>
</td></tr>
</table>
</center>
</body>
</html>