Skip to content

Instantly share code, notes, and snippets.

@danlangford

danlangford/BMMockUp.html

Created December 4, 2020 15:18
Show Gist options
  • Save danlangford/866c001739a9eec6699f55d4df2724d3 to your computer and use it in GitHub Desktop.
Save danlangford/866c001739a9eec6699f55d4df2724d3 to your computer and use it in GitHub Desktop.
Download ZIP
Idea of how Button Weavers could look with a modern UI component toolkit
Raw
BMMockUp.html
<!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