astonishers.net/index.html at master · persimmons/astonishers.net · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1">
		<title>Astonishers: The Animated Webcomic</title>

		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

		<!-- CSS to use for development -->
		<link rel='stylesheet' href='css/astonishers.css' />
		<!-- CSS to use for deployment -->
		<!-- <link rel='stylesheet' href='css/astonishers.3.5.min.css' /> -->

		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

		<!-- JQuery Mobile settings must be loaded before JQM itself -->
		<!-- Script to user for development -->
		<script src="js/jq_preload_settings.js"></script>
		<!-- Script to use for deployment -->
		<!--<script src="js/jq_preload_settings.3.5.min.js"></script>-->

		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	</head>

	<body>
		<!-- Primary (and only) page for JQuery Mobile -->
		<div data-role="page" id="contentPane">
			<!-- HEADER BAR/ABOUT ICON -->
			<header data-role="header"  data-position="fixed" >
				<h1 id="pageLabel">Astonishers, the Animated Webcomic</h1>
				<a href="#about" data-rel="popup" data-transition="pop" data-icon="info" class="ui-btn-right" data-iconpos="notext">About</a>
			</header>

			<div data-role="content" role="main">
				<div id="mainContent">
					<!-- This section dynamically filled/emptied in Javascript -->
				</div>
			</div>

			<!-- ABOUT POP-UP -->
			<div data-role="popup" id="about">
					<p align="center">Created by <a href="http://ctrayn.weebly.com">Chel Traynor</a><br>
					Follow on <a href="http://astonishers.tumblr.com">Tumblr</a>/<a href="http://twitter.com/tweetstonishers">Twitter</a><br>
					Reader (v. 3.5) by <a href="https://www.linkedin.com/pub/keith-jackson/22/bb7/2b2">Keith Jackson</a><br>
					Site issues? <a href="mailto:i@keithajackson.com">Contact the developer</a>
					</p>
			</div>

			<!-- NAVIGATION POP-UP -->
			<div data-role="popup" id="navPane">

				<div data-role="content" data-theme="a">
					<label for="dynamicTOC">Chapter Selection</label>
					<form id="dynamicTOC">
						<!-- This section filled in Javascript (Book.js/Book.loadNavTOC()) -->
					</form>
					<label for="quicklinks">Quick Links</label>
					<div id="quicklinks" data-role="controlgroup" data-type="vertical">
						<a id="firstPage" data-role="button">First Page</a>
						<a id="latestPage" data-role="button">Latest Page</a>
					</div>
				</div>
			</div>

			<!-- NAVIGATION FOOTER -->
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a id="previousPage" data-role="button" class="activeOnce" data-icon="arrow-l">Previous</a></li>
						<li><a id="showNavBtn" class="activeOnce" data-transition="pop" data-icon="grid" >Navigation</a></li>
						<li><a id="nextPage" data-role="button" class="activeOnce" data-icon="arrow-r">Next</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- Use this set of scripts for development -->
		<script src="js/Page.js"></script>
		<script src="js/TableOfContents.js"></script>
		<script src="js/Book.js"></script>
		<script src="js/cookieTools.js"></script>
		<script src="js/astonishers.js"></script>
		<!-- Use this script for release (after minifying) -->
		<!--<script src="js/astonishers.3.5.min.js"></script>-->
	</body>
</html>