Backend for songs.zachdecook.com
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
<?php
$theme = $_COOKIE['theme'] ?? 'light';
if ( isset( $_GET['theme'] ) ){
	$theme = $_GET['theme'];
	setcookie( 'theme', $theme, time()+60*60*24*30 );
}
?>
<!--
index.php contains the main html used for creating the page.
Author: Zach DeCook
-->
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet"
			href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
			integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
			crossorigin="anonymous">

		<link rel="stylesheet" href="index.css" >
		<link rel="stylesheet"
			href=
			<?php
			if ( $theme == 'dark' ){echo "'theme-dark.css'";}
			else {echo "'theme.css'";}
			?> >
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=.65">
		<title>Choruses and Hymns</title>
		<meta name="theme-color" content="#001144">
	</head>

<body class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">

<header>

	<div class = "col-xs-6 col-xs-offset-0 ">
		<h3>Prosongsa</h3>
		Theme:
		<?php
		$query = preg_replace( '/&?theme=\w+/', '', $_SERVER['QUERY_STRING'] );
		echo "<a class='lightbubble' href='?$query&theme=light'>&#x25cf;</a>
			<a class='darkbubble' href='?$query&theme=dark'>&#x25cf;</a>";
		?>
		(Uses cookies :)
		<br>
		<a href="?song=0">Table of contents</a>
		<form>
			<input name='song' type='number' value='<?php echo isset($_GET['song']) ? $_GET['song'] : '' ?>'
			min='0' max='169'
			/>
			<input class="btn btn-Z" type="submit" value="Jump to song" />
		</form>
	</div>

	<div class = "col-xs-6 col-xs-offset-0 ">
		<div id="chordarea">
			<canvas id='guitarregion' width="100" height="100" onclick="cycle(guitarObj);"></canvas>
			<canvas id='ukuleleregion' width="100" height="100" onclick="cycle(ukeObj);"></canvas>
		</div>
		<i>Experimental: Click on a chord to view guitar tablature</i>
		<div id="messages"></div>
	</div>

</header>

<div class = "text-center">
	<form>
	<?php $transp = isset( $_GET['transp']) ? (int)$_GET['transp'] : 0 ?>
	<select name="transp" id="transp"
		value = "<?php echo $transp;?>"
	>
		<?php
			for ($i=-6; $i < 12; $i++) {
				if (($transp + 24)%12 == $i) $selected = 'selected';
				else $selected = '';
				//$dir = ($i >= 0 ? "up" : "down" );
				$dir = "transpose";
				echo "<option value='$i' $selected>$dir $i semitones</option>";
			}
		?>
	</select>
	<noscript>
		<button>Transpose</button>
	</noscript>
	</form>
</div>

<br>

<div>

<?php
include 'page.php';

	$song_number = isset( $_GET['song'] ) ? $_GET['song'] : '';
	if( ! $song_number )
	{
		$sort = 'default';
		if ( isset( $_GET['sort'] ) ) $sort = $_GET['sort'];
		echo toc($sort);
	}
	else
	{
		echo load_song( $song_number, ($transp + 24)%12 );
	}

?>
</div>

<footer>
All songs are owned by their respective copyright holders. No infringement intended.
<br>
Powered by <a href='https://github.com/earboxer/prosongsa'>Prosongsa</a>.
Suggest features <a href='https://github.com/earboxer/prosongsa/issues'>here</a>.
<br>
Prosongsa software licensed under the <a href='LICENSE'>GNU AGPLv3</a>.
View source <a href='source.php'>here</a>.
<br>
Using <a href='https://github.com/earboxer/chordsdata'>chordsdata</a>,
licensed under the <a href='chordsdata/LICENSE'>GNU LGPLv3</a>.
</footer>

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="toc-filter.js"></script>
<script type="text/javascript" src="chordsdata/chords.js"></script>
<script type="text/javascript" src="chordsdata/ukulelechords.js"></script>
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript" src="jsonly.js"></script>
<script type="text/javascript" src="ccharter/scripts/ccharter.js"></script>
  </body>
</html>