easyctf-2017/web/pages/settings.html

<div class="row">
	<div class="col-sm-3 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">Account Settings</h4>
			</div>
			<div class="list-group">
				<a href="#profile" class="list-group-item" data-scroll>Profile</a>
				<a href="#email" class="list-group-item" data-scroll>Email</a>
				<a href="#security" class="list-group-item" data-scroll>Security</a>
			</div>
		</div>
	</div>
	<div class="col-sm-9 col-xs-12">
		<section id="profile">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Public Profile</h4>
				</div>
				<div class="panel-body">
					<label>Profile Picture</label>
					<div class="row">
						<div class="col-sm-2">
							<img src="/api/user/avatar/{{ user.uid }}" id="avatar" style="width:100%;max-height:256px;" />
						</div>
						<div class="col-sm-10">
							<p>
								<a href="javascript:upload_new_picture();" class="btn btn-primary">Upload new picture</a>
								<a href="javascript:remove_profile_picture();" class="btn btn-default">Remove profile picture</a>
							</p>
							<p>
								<i>If you remove your picture, an automatically generated <a href="http://en.wikipedia.org/wiki/Identicon" target="_blank">identicon</a> will be used.</i>
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section id="email">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Email</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Email Preferences</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
		</section>
		<section id="security">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Change Password</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Active Sessions</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
		</section>
	</div>
</div>

<script type="text/javascript">
	smoothScroll.init({
		speed: 480,
		easing: "easeOutCubic",
		offset: $("#navbar").outerHeight(),
		updateURL: false
	});
</script>