wilm0x42/example_8bit_vue.html

## example_8bit_vue.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>8 Bit Music Theory Weeklies</title>
	<link rel="stylesheet" href="/static/style.css" type="text/css" media="all">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
	<h1>
		<img src="/static/banner.png" alt="8BIT MUSIC THEORY WEEKLIES" />
	</h1>
	<div id="content">
		<div class="entries-container">
			<h2 class="week-title">Week XYZ: Fill this in by hand!</h2><h3 class="week-subtitle">Month day&#x27;th 20XX - 1 entries</h3>
			<table cellpadding='0' class='vote-controls'>
				<tr>
					<th>Entrant</th>
					<th>Composition Title</th>
					<th>PDF</th>
					<th>MP3</th>
				</tr>
				<tr v-for="entry in entries">
					<td>{{ entry.entrantName }}</td>
					<td>{{ entry.entryName }}</td>
					<td><button v-on:click="viewPDF(entry.pdfFilename)">View PDF</button></td>
					<td><audio controls><source v-bind:src="entry.mp3Filename" type="audio/mpeg"><a v-bind:href="entry.mp3Filename">mp3 link</a></audio></td>
				</tr>
			</table>
		</div>

		<div class="pdf-container" id="pdf-container">
			<div v-if="pdfShowWelcome" id="pdf-viewer" class="pdf-viewer-welcome">
				<div id="pdf-alt" class="pdf-alt">
					<img width="100%" src="/static/kirb_phones.png" />
					<h2>Welcome!<br>Select one of the entries on the left to view its score.</h2>
				</div>
			</div>
			<object v-if="!pdfShowWelcome" id="pdf-viewer" class="pdf-viewer-live" v-bind:data="pdfViewingFilename" type="application/pdf">
				<div id="pdf-alt" class="pdf-alt">
					<img width="100%" src="/static/kirb_think.png">
					<h2><a v-bind:href="pdfViewingFilename">Link to PDF (embedded viewer failed)</a></h2>
				</div>
			</object>
		</div>
	</div>

	<script>
		var app = new Vue({
			el: '#content',
			data: {
				pdfShowWelcome: true,
				pdfViewingFilename: "TODO: Make this a rickroll",

				// I'm assuming it'd be normal to have the above data
				// baked into the html file, and have some code to fetch
				// the entry data below, if not have it injected into the
				// file with str.replace() on the server
				entries: [
					{
						"uuid": "667d0610-6a57-4a6c-9ee8-83840f5af167",
						"pdfFilename": "Frosty_Star_Field.pdf",
						"mp3Format": "mp3",
						"mp3Filename": "Frosty_Star_Field.mp3",
						"entryName": "Frosty Star Field",
						"entrantName": "wilm0x42"
					},
					{
						"uuid": "2d88c1cd-5140-4fa6-b99e-05659da76d6c",
						"pdfFilename": "60Hz_Serenade.pdf",
						"mp3Format": "mp3",
						"mp3Filename": "60Hz_Serenade.mp3",
						"entryName": "60Hz Serenade",
						"entrantName": "wilm0x42"
					}
				]
			},
			methods: {
				viewPDF: function(url) {
					this.pdfShowWelcome = false
					this.pdfViewingFilename = url
				}
			}
		})
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>8 Bit Music Theory Weeklies</title>
	<link rel="stylesheet" href="/static/style.css" type="text/css" media="all">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
	<h1>
	<img src="/static/banner.png" alt="8BIT MUSIC THEORY WEEKLIES" />
	</h1>
	<div id="content">
	<div class="entries-container">
	<h2 class="week-title">Week XYZ: Fill this in by hand!</h2><h3 class="week-subtitle">Month day'th 20XX - 1 entries</h3>
	<table cellpadding='0' class='vote-controls'>
	<tr>
	<th>Entrant</th>
	<th>Composition Title</th>
	<th>PDF</th>
	<th>MP3</th>
	</tr>
	<tr v-for="entry in entries">
	<td>{{ entry.entrantName }}</td>
	<td>{{ entry.entryName }}</td>
	<td><button v-on:click="viewPDF(entry.pdfFilename)">View PDF</button></td>
	<td><audio controls><source v-bind:src="entry.mp3Filename" type="audio/mpeg"><a v-bind:href="entry.mp3Filename">mp3 link</a></audio></td>
	</tr>
	</table>
	</div>

	<div class="pdf-container" id="pdf-container">
	<div v-if="pdfShowWelcome" id="pdf-viewer" class="pdf-viewer-welcome">
	<div id="pdf-alt" class="pdf-alt">
	<img width="100%" src="/static/kirb_phones.png" />
	<h2>Welcome!<br>Select one of the entries on the left to view its score.</h2>
	</div>
	</div>
	<object v-if="!pdfShowWelcome" id="pdf-viewer" class="pdf-viewer-live" v-bind:data="pdfViewingFilename" type="application/pdf">
	<div id="pdf-alt" class="pdf-alt">
	<img width="100%" src="/static/kirb_think.png">
	<h2><a v-bind:href="pdfViewingFilename">Link to PDF (embedded viewer failed)</a></h2>
	</div>
	</object>
	</div>
	</div>

	<script>
	var app = new Vue({
	el: '#content',
	data: {
	pdfShowWelcome: true,
	pdfViewingFilename: "TODO: Make this a rickroll",

	// I'm assuming it'd be normal to have the above data
	// baked into the html file, and have some code to fetch
	// the entry data below, if not have it injected into the
	// file with str.replace() on the server
	entries: [
	{
	"uuid": "667d0610-6a57-4a6c-9ee8-83840f5af167",
	"pdfFilename": "Frosty_Star_Field.pdf",
	"mp3Format": "mp3",
	"mp3Filename": "Frosty_Star_Field.mp3",
	"entryName": "Frosty Star Field",
	"entrantName": "wilm0x42"
	},
	{
	"uuid": "2d88c1cd-5140-4fa6-b99e-05659da76d6c",
	"pdfFilename": "60Hz_Serenade.pdf",
	"mp3Format": "mp3",
	"mp3Filename": "60Hz_Serenade.mp3",
	"entryName": "60Hz Serenade",
	"entrantName": "wilm0x42"
	}
	]
	},
	methods: {
	viewPDF: function(url) {
	this.pdfShowWelcome = false
	this.pdfViewingFilename = url
	}
	}
	})
	</script>
	</body>
	</html>