main.php

<?=$_includes->loadDocHead()?>
<?=$_includes->showHeader()?>

<!-- login page -->
<div id="pages">
	<div id="login" data-role="page" class="page">
		<div class="login-header">Link other accounts:</div>
	
		<div id="facebook" class="loginButton">
			<img src="/img/mobile/facebook-logo.png" class="fb-logo" />
			<div>Sign in using <span class="title">facebook</span></div>
		</div>
	
		<div id="twitter" class="loginButton disabled">
			<img src="/img/mobile/twitter-logo.png" class="t-logo" />
			<div>Sign in using <span class="title">Twitter</span></div>
		</div>
	
		<div id="googleplus" class="loginButton disabled">
			<img src="/img/mobile/google-logo.png" class="gp-logo" />
			<div>Sign in using <span class="title">Google Plus</span></div>
		</div>
	
		<div id="linkedin" class="loginButton disabled">
			<img src="/img/mobile/linkedin-logo.png" class="li-logo" />
			<div>Sign in using <span class="title">LinkedIn</span></div>
		</div>
	</div>
	
	<!-- news page -->
	<div id="news" data-role="page" class="page firstLoad">
		<div id="articles" data-role="content">
			<article class="news-row">
				<div class="news-inner-row">	
				</div>
			</article>
			<article class="news-row">
				<div class="news-inner-row">
				</div>
			</article>
			<article class="news-row">
				<div class="news-inner-row">
				</div>
			</article>
		</div>
		<div class="news-arrows"></div>
		<!-- news templates -->
		<script type="text/x-handlebars-template" id="news-story">
			<section class="news-story {{aClass}}">
				<a href="/article/{{id}}" style="background-image:url({{image}})"></a>
				<div class="news-details">
					<div class="news-info">
						<h5>{{title}}</h5>
					</div>
					<div class="news-match">{{author}}</div>
				</div>
			</section>
		</script>
	</div>
	
	<!-- article page -->
	<div id="article" data-role="page" class="page">
		<div id="article-page">
			<!-- article template -->
			<script type="text/x-handlebars-template" id="single-article">
				<div id="article-header">
					<div class="article-image">
						<img src="{{image}}" />
					</div>
					<h2 class="article-title">{{title}}</h2>
					<div class="article-headunder">
						<div id="article-quiz" class="article-button">
							<a href="/quiz" data-transition="slideup"><div class="question">Q</div>Take the quiz</a>
						</div>
						<div class="article-button share">Share</div>
		
						<div class="article-size">
							<div class="article-button small">a</div>
							<div class="article-button medium">a</div>
							<div class="article-button large">a</div>
						</div>
					</div>
				</div>
				<hr /> 
				<div id="article-main">
					<h5 class="article-author">{{source}}</h5>
					<div class="ariticle-text">
						{{#each body}}
							<p>{{this}}</p>
						{{/each}}
					</div>
				</div>
			</script>
		</div>
	</div>

	<!-- article quiz dialog -->
	<div id="quiz" class="page">
		<div id="quiz-header"></div>
		<div id="quiz-body">

			<div id="quiz-content"></div>
			
			<script type="text/x-handlebars-template" id="quiz-template">
				{{#each_object quiz_questions}}
					<div class="quiz-question-text">{{key}}. {{value.quiz_question}}</div>
					<div class="quiz-question-choice">
						{{#each_object value.quiz_question_answers}}
							<label class="quiz-question-label">
								<input type="radio" name="quiz-question-id-{{key}}" class="quiz-question-radio" />
								{{value}}
							</label>
						{{/each_object}}
					</div>
				{{/each_object}}
			</script>

			<div id="quiz-footer">
				<div id="quiz-close" class="quiz-button">Close</div>
				<div id="quiz-submit" class="quiz-button">Submit</div>
			</div>
		</div>
	</div>

	<!-- leaderboard page -->
	<div id="leaderboard" data-role="page" class="page">
		<div class="leaderboard-table">
			<div class="table-column rank">
				<div class="table-row header">Rank</div>
				<div class="table-row">1</div>
				<div class="table-row">2</div>
				<div class="table-row">3</div>
				<div class="table-row">4</div>
				<div class="table-row">5</div>
			</div>
			<div class="table-column username">
				<div class="table-row header">Username</div>
				<div class="table-row">optikalefx</div>
				<div class="table-row">LeonBlade</div>
				<div class="table-row">rstallman</div>
				<div class="table-row">tbaker</div>
				<div class="table-row">xXxH4x0RM4$70RxXx</div>
			</div>
			<div class="table-column points">
				<div class="table-row header">Points</div>
				<div class="table-row">5470</div>
				<div class="table-row">2760</div>
				<div class="table-row">1375</div>
				<div class="table-row">605</div>
				<div class="table-row">12</div>
			</div>
		</div>
	</div>

</div>

<?=$_includes->showFooter()?>