<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<title>CAO</title>
<link rel="stylesheet" href="cao-common.css">
<link rel="stylesheet" href="cao-mobile.css">
<script src="jquery.js"></script>
<script src="cao-common.js"></script>
<script src="cao-mobile.js"></script>
</head>
<body>
<div data-role="page">
<header hidden>
<span id="leave-room">Leave this room</span>
<span id="score">Your score is 0</span>
</header>
<div id="home" class="page current">
<h1>Cards Against Humanity</h1>
<h2>A party game for horrible people.</h2>
<button id="join-btn" class="bottom" hidden>Join game!</button>
</div>
<div id="game" class="page">
<div data-state="judge-collect">
<div class="card-list read-only">
<button id="black-card" class="card black"></button>
</div>
<div class="message">You have <span id="played-card-number">0</span> cards!</div>
</div>
<div id="white-cards" class="card-list read-only"></div>
<button id="become-judge-btn" class="bottom" data-state="become-judge">Become judge!</button>
<div class="bottom" data-state="judge-choose">During high school, I never really fit in until I found _____ club..</div>
<div class="bottom" data-state="player-choose">Choose a card...</div>
<div class="bottom" data-state="player-wait">Waiting for judge...</div>
<button class="bottom" data-state="judge-collect">Collect!</button>
</div>
</body>
</html>