Created
December 4, 2020 15:18
-
-
Save danlangford/866c001739a9eec6699f55d4df2724d3 to your computer and use it in GitHub Desktop.
Idea of how Button Weavers could look with a modern UI component toolkit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<!-- Meta tags --> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> | |
<meta name="viewport" content="width=device-width" /> | |
<!-- Favicon and title --> | |
<link rel="icon" href="path/to/fav.png"> | |
<title>Open games — Button Men Online</title> | |
<!-- Halfmoon CSS --> | |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" rel="stylesheet" /> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" | |
integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous"> | |
<!-- | |
Or, | |
Use the following (CSS file with variables): | |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" /> | |
Learn more: https://www.gethalfmoon.com/docs/customize/#notes-on-browser-compatibility | |
--> | |
</head> | |
<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" | |
data-set-preferred-mode-onload="true"> | |
<!-- Modals go here --> | |
<!-- Reference: https://www.gethalfmoon.com/docs/modal --> | |
<!-- Page wrapper start --> | |
<div class="page-wrapper with-navbar with-navbar-fixed-bottom"> | |
<!-- Sticky alerts (toasts), empty container --> | |
<!-- Reference: https://www.gethalfmoon.com/docs/sticky-alerts-toasts --> | |
<div class="sticky-alerts"></div> | |
<!-- Navbar start --> | |
<nav class="navbar"> | |
<!-- Reference: https://www.gethalfmoon.com/docs/navbar --> | |
<a href="#" class="navbar-brand"> | |
<img src="https://i1.wp.com/beatpeopleup.cheapass.com/wp-content/uploads/2017/04/SkullyFaviconButtonMen.png" /> | |
</a> | |
<ul class="navbar-nav d-none d-md-flex"> | |
<!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px) --> | |
<li class="nav-item"><a href="#" class="nav-link">Overview</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Monitor</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Create Game</a></li> | |
<li class="nav-item active"><a href="#" class="nav-link">Open Games</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Preferences</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">History</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Buttons</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Who's online</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Forum</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Next game</a></li> | |
</ul> | |
<span class="ml-auto navbar-text">Bagels</span> | |
<div class="navbar-content"> | |
<button class="btn btn-primary" type="submit">Logout?</button> | |
</form> | |
</nav> | |
<!-- Navbar end --> | |
<!-- Content wrapper start --> | |
<div class="content-wrapper"> | |
<!-- | |
Add your page's main content here | |
Examples: | |
1. https://www.gethalfmoon.com/docs/content-and-cards/#building-a-page | |
2. https://www.gethalfmoon.com/docs/grid-system/#building-a-dashboard | |
--> | |
<div class="content text-center"> | |
<h2 class="content-title">Open Games</h2> | |
<h5>Your open games (waiting for other players to join)</h5> | |
</div> | |
<div class="row justify-content-center "> | |
<table class="table col-7"> | |
<thead> | |
<tr> | |
<th>Game</th> | |
<th>Your Button</th> | |
<th>Opponent's Button</th> | |
<th>Rounds</th> | |
<th>Action</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr class="border-bottom-0"> | |
<th>Game 66231</th> | |
<td><a href="#">Smith</a><span class="fa fa-info-circle"></span></td> | |
<td>Any Button</td> | |
<td>3</td> | |
<td><button class="btn">Cancel Game</button></td> | |
</tr> | |
<tr> | |
<td colspan="5" class="text-center mt-0 pt-0 border-top-0">FIGHT CITY! Core v West</td> | |
</tr> | |
<tr class="border-bottom-0"> | |
<th>Game 66233</th> | |
<td><a href="#">Steve (The Core)</a><span class="fa fa-info-circle"></span></td> | |
<td>Any Button</td> | |
<td>3</td> | |
<td><button class="btn">Cancel Game</button></td> | |
</tr> | |
<tr> | |
<td colspan="5" class="text-center mt-0 pt-0 border-top-0">FIGHT CITY! Core v West</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<div class="content text-center"> | |
<h5>Games you can join</h5> | |
</div> | |
<div class="row justify-content-center "> | |
<table class="table col-8"> | |
<thead> | |
<tr> | |
<th>Game</th> | |
<th>Your Button</th> | |
<th>Challenger's Button</th> | |
<th>Challenger</th> | |
<th>Rounds</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr class="border-bottom-0"> | |
<th><button class="btn">Join Game 66090</button></th> | |
<td><a href="#">RandomBMTetraskilli</a><span class="fa fa-info-circle"></span></td> | |
<td><a href="#">Echo</a><span class="fa fa-info-circle"></span></td> | |
<td class="bg-secondary">jimmosk</td> | |
<td>3</td> | |
</tr> | |
<tr> | |
<td colspan="5" class="text-center mt-0 pt-0 border-top-0">Random Thanksgaming!</td> | |
</tr> | |
<tr class="border-bottom-0"> | |
<th><button class="btn">Join Game 66092</button></th> | |
<td><a href="#">RandomBMTetraskilli</a><span class="fa fa-info-circle"></span></td> | |
<td><a href="#">Echo</a><span class="fa fa-info-circle"></span></td> | |
<td class="bg-secondary">jimmosk</td> | |
<td>3</td> | |
</tr> | |
<tr> | |
<td colspan="5" class="text-center mt-0 pt-0 border-top-0">Random Thanksgaming!</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<!-- Content wrapper end --> | |
<!-- Navbar fixed bottom start --> | |
<nav class="navbar navbar-fixed-bottom"> | |
<!-- Reference: https://www.gethalfmoon.com/docs/navbar#navbar-fixed-bottom --> | |
<ul class="navbar-nav d-none d-md-flex"> | |
<!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px) --> | |
<li class="nav-item"><a href="#" class="nav-link">Help</a></li> | |
<li class="nav-item"><a href="#" class="nav-link">Privacy</a></li> | |
</ul> | |
<span class="ml-auto navbar-text">Button Men is copyright 1999, 2020 James Ernest and Cheapass Games: | |
www.cheapass.com and www.beatpeopleup.com, and is used with permission.</span> | |
</nav> | |
<!-- Navbar fixed bottom end --> | |
</div> | |
<!-- Page wrapper end --> | |
<!-- Halfmoon JS --> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/halfmoon.min.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment