175 lines
6.9 KiB
HTML
175 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Fediverse Madness - abtmtr.link</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="/styles/normal.css" />
|
|
<link rel="stylesheet" href="/styles/myapp.css" />
|
|
<link rel="stylesheet" href="./style.css" />
|
|
<style>
|
|
:root {
|
|
--base-color: 60, 40%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<section>
|
|
<h1>Fediverse Madness</h1>
|
|
<p>Competitive bracket-based comparisons of Fediverse users.</p>
|
|
<p>Requires JavaScript.</p>
|
|
</section>
|
|
<section id="accessibility" hidden></section>
|
|
</header>
|
|
<main>
|
|
<section id="whoami" hidden>
|
|
<h3>Who are you?</h3>
|
|
<span class="userinputbox">
|
|
<span>@</span>
|
|
<input type="text" name="user" id="user" class="userinstance" />
|
|
<span>@</span>
|
|
<input type="text" name="instance" id="instance" class="userinstance" />
|
|
</span>
|
|
<br />
|
|
<hr />
|
|
<button id="submitwhoami_followers">Play (Followers)</button>
|
|
<button id="submitwhoami_following">Play (Following)</button>
|
|
<button id="submitwhoami_manual">Play (Manual)</button>
|
|
<p id="errorwhoami"></p>
|
|
</section>
|
|
<section id="followers" hidden>
|
|
<h3>Followers list</h3>
|
|
<p id="loadingfollowers">Retrieving followers... Please wait.</p>
|
|
<table id="listfollowers" hidden>
|
|
<tr id="listfollowersvalues">
|
|
<th>S.</th>
|
|
<th>Av.</th>
|
|
<th>User</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
<button id="selectallfollowers">Select all</button>
|
|
<button id="selectnofollowers">Select none</button>
|
|
<button id="selectrandomfollowers">Select random</button>
|
|
<button id="deselectrandomfollowers">Deselect random</button>
|
|
</div>
|
|
<div>
|
|
<button id="morefollowers">Load more</button>
|
|
<button id="savehandlesfollowers">Save selection</button>
|
|
<button id="loadhandlesfollowers">Load selection</button>
|
|
</div>
|
|
<button id="submitfollowers" disabled>Done</button>
|
|
</section>
|
|
<section id="following" hidden>
|
|
<h3>Following list</h3>
|
|
<p id="loadingfollowing">Retrieving following... Please wait.</p>
|
|
<table id="listfollowing" hidden>
|
|
<tr id="listfollowingvalues">
|
|
<th>S.</th>
|
|
<th>Av.</th>
|
|
<th>User</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
<button id="selectallfollowing">Select all</button>
|
|
<button id="selectnofollowing">Select none</button>
|
|
<button id="selectrandomfollowing">Select random</button>
|
|
<button id="deselectrandomfollowing">Deselect random</button>
|
|
</div>
|
|
<div>
|
|
<button id="morefollowing">Load more</button>
|
|
<button id="savehandlesfollowing">Save selection</button>
|
|
<button id="loadhandlesfollowing">Load selection</button>
|
|
</div>
|
|
<button id="submitfollowing" disabled>Done</button>
|
|
</section>
|
|
<section id="manual" hidden>
|
|
<h3>Manual list</h3>
|
|
<p id="loadingmanual"></p>
|
|
<table id="listmanual" hidden>
|
|
<tr id="listmanualvalues">
|
|
<th>S.</th>
|
|
<th>Av.</th>
|
|
<th>User</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
<button id="selectallmanual">Select all</button>
|
|
<button id="selectnomanual">Select none</button>
|
|
<button id="selectrandommanual">Select random</button>
|
|
<button id="deselectrandommanual">Deselect random</button>
|
|
</div>
|
|
<div>
|
|
<span class="userinputbox">
|
|
<span>@</span>
|
|
<input type="text" name="user" id="manualuser" class="userinstance" />
|
|
<span>@</span>
|
|
<input type="text" name="instance" id="manualinstance" class="userinstance" />
|
|
</span>
|
|
<button id="moremanual">Fetch</button>
|
|
</div>
|
|
<button id="submitmanual" disabled>Done</button>
|
|
</section>
|
|
<section id="game" hidden>
|
|
<h3>Fight!</h3>
|
|
<p id="gameBracketLevel">Bracket Level ...</p>
|
|
<p id="gameBracketFight">Round ...</p>
|
|
<div class="gridUsersVert">
|
|
<div class="gridUser" id="gameUserOne">
|
|
<img src="" id="gameUserOneImage" width="128" height="128" />
|
|
<div>
|
|
<h3 id="gameUserOneName"></h3>
|
|
<p id="gameUserOneId"></p>
|
|
<!-- <p id="gameUserOneNote"></p>
|
|
<table id="gameUserOneFields">
|
|
</table> -->
|
|
</div>
|
|
</div>
|
|
<div class="gridUser" id="gameUserTwo">
|
|
<img src="" id="gameUserTwoImage" width="128" height="128" />
|
|
<div>
|
|
<h3 id="gameUserTwoName"></h3>
|
|
<p id="gameUserTwoId"></p>
|
|
<!-- <p id="gameUserTwoNote"></p>
|
|
<table id="gameUserTwoFields">
|
|
</table> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<button id="gameSubmitLeft" disabled>Please wait...</button>
|
|
<button id="gameSubmitRight" disabled>Please wait...</button>
|
|
</section>
|
|
<section id="winner" hidden>
|
|
<h3>Winner</h3>
|
|
<p id="winnermessage">Congratulations, ...</p>
|
|
<div class="gridUser" id="winnerUser">
|
|
<img src="" id="winnerUserImage" width="128" height="128" />
|
|
<div>
|
|
<h3 id="winnerUserName"></h3>
|
|
<p id="winnerUserId"></p>
|
|
<!-- <p id="winnerUserNote"></p>
|
|
<table id="winnerUserFields">
|
|
</table> -->
|
|
</div>
|
|
</div>
|
|
<h3>Bracket</h3>
|
|
<div class="flexUsersVert" id="winnerusers">
|
|
</div>
|
|
<hr />
|
|
<button id="winnerPlayAgain">Play Again</button>
|
|
</section>
|
|
</main>
|
|
<section id="accessibility" hidden></section>
|
|
<script src="/scripts/accessibility.js"></script>
|
|
<script>
|
|
let game = null;
|
|
</script>
|
|
<script src="./script.js"></script>
|
|
<script src="./scripts/game.js"></script>
|
|
</body>
|
|
</html>
|