<!DOCTYPE html>
<html lang="en">
<head>
<title>CCTF Frontend</title>
<link rel="icon" type="image/png" href="cctf-icon.png" sizes="96x96">
<link href="RobotoMono.css" rel="stylesheet">
<link rel="stylesheet" href="FontAwesomev5.15.4.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top">
<div class="top_logo">
<img src="cctf-logo.png" id="logo" alt="CCTF logo" width="200" height="49">
</div>
<div class="top_left">
<div>
<i style="margin: 10px;" class="fas fa-users"></i>
</div>
<div style="padding-right: 18px; line-height: 14px;">
<span id="header_uppercase">PLAYERS</span><br>
<span id="players">Loading...</span>
</div>
<div>
<i style="margin: 10px;" class="far fa-flag"></i>
</div>
<div style="line-height: 14px;">
<span id="header_uppercase">FOUND FLAGS</span><br>
<span id="submissions">Loading...</span>
</div>
</div>
<div class="top_center" id="toplist">
<div class="topitem">
<span id="remaining_time" style="font-size: 28px; font-weight: 200">--:--:--</span>
</div>
</div>
<div class="top_right">
<div class="topitem">
<!-- Trigger/Open The Modal -->
<div style="margin: 0 18px; cursor: pointer" id="myBtn">
<i style="margin-right: 2px;" class="fas fa-bolt"></i>
<span>Getting Started</span>
</div>
</div>
</div>
</div>
<div class="left">
<div class="left-content">
<h1>My Account</h1>
<div id="account_locked">
<button id="account_enable"><img id="metamask" src="metamask.svg">Enable account</button>
</div>
<div id="account_unlocked" style="display: none">
<div id="user"></div>
<div id="unverified" style="display: none">
<h1>Register</h1>
<input type="text" id="playerName" placeholder="Your name...">
<br>
<span style="font-size: 14px;" id="myBtn">I have read the f#%@ken manual: </span><input type="checkbox" id="myCheck">
<button id="register"><i class="fab fa-ethereum" style="font-size: 16px; margin-right: 8px;"></i>Submit</button>
</div>
<div id="verified" style="display: none">
<h1>My Points</h1>
<span id="holding">0</span>
<h1>Challenges</h1>
<p>Challenge 1</p>
<p>Challenge 2</p>
<p>Challenge 3</p>
<p>Challenge 4</p>
<p>Challenge 5</p>
<p>Challenge 6</p>
</div>
<div id="banned" style="display: none">
<h1>BANNED</h1>
</div>
</div>
</div>
</div>
<div class="main">
<div id="loading">Loading...</div>
<h2>Leaderboard</h2>
<table id="rank_list"></table>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Getting Started</h2>
</div>
<div class="modal-body">
<h3>The Game</h3>
<p>Soooo much fun!</p>
<h3>Contract Address</h3>
<p><a href="https://moonbase.moonscan.io/address/0x919f68cc35ce5d49a45c94dc44e7bf444f9a7531" target="_blank">0x919f68cc35ce5d49a45c94dc44e7bf444f9a7531</a></p>
<h3>Questions?</h3>
<p>Answers.</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="web3.min_1.8.0.js"></script>
<script language="javascript" type="text/javascript" src="abi.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
</body>
</html>