0ct0pu5
/
tutorials


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>i12bretro Tutorials</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
		<link href="css/steps.css" rel="stylesheet" type="text/css" />
		<style>
			table { width: 65%; max-width: 950px; }
			tr { line-height: 24px; }
			tbody tr td { vertical-align: bottom; }
			.dataTables_filter { position: absolute; top: 50px; right: 100px; z-index: 100; }
			img.viewIcon { height: 24px; }
			a:link { color: #e00; transition: color 0.35s; }
			a:hover { color: #333; }
		</style>
	</head>
	<body>
		<div id="gridContainer">
			<div class="topMargin"></div>
			<div id="listName" class="topMargin">
				<h1>i12bretro Tutorials</h1>
			</div>
			<div></div>
			<div id="content">
				<table border="0" cellspacing="2" cellpadding="2" align="center" width="100%">
					<thead>
						<tr><th width="80">ID</th><th>Title</th><th width="40">View</th><th width="195">Last Modified</th></tr>
					</thead>
					<tbody id="tutorialList">
					
					</tbody>
				</table>
			</div>
		</div>
	</body>
	<script>
		$.ajax({ type:'GET', dataType: 'json', cache: false, url: './data.json', success: function(r){ 
				r.forEach((tut) => {
					$('#tutorialList').append(`<tr><td align="center">${('0000'+ tut.i).slice(-4)}</td><td><a href="https://i12bretro.github.io/tutorials/${('0000'+ tut.i).slice(-4)}.html" target="_blank">${tut.t}</a></td><td align="center"><a href="https://youtu.be/${tut.v}" target="_blank"><img src="images/youtube.png" alt="View on YouTube" title="View on YouTube" class="viewIcon" /></a></td><td align="center">${new Date((tut.d * 1000)).toLocaleString().replace(', ',' ')}</td></tr>`);
				});
				initTable();
			}
		});
		
		function initTable(){
			$('table').DataTable({'paging':   false });
		}
	</script>
</html>