177 lines
8.9 KiB
HTML
Executable File
177 lines
8.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html dir="ltr" class="uk-height-1-1 uk-notouch" lang="en-us">
|
|
<head>
|
|
<title>Blank White Cards</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="css/uikit.min.css" />
|
|
<link rel="stylesheet" href="css/uikit.docs.min.css" />
|
|
<link rel="stylesheet" href="css/theme.css" />
|
|
<link rel="stylesheet" href="css/bwc.css" />
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/uikit.min.js"></script>
|
|
<script src="js/uikit-icons.min.js"></script>
|
|
<script src="js/cards/draw.js"></script>
|
|
<script src="js/bwc.js"></script>
|
|
</head>
|
|
|
|
<body class="uk-height-1-1">
|
|
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom uk-height-1-1">
|
|
<div class="uk-text-center uk-height-1-1 uk-container">
|
|
<h1 class="uk-heading-line-">
|
|
<span><img src="img/bwc.png" style="width:450px;" class="" /></span>
|
|
</h1>
|
|
<div class="uk-flex uk-flex-center">
|
|
<ul class="uk-subnav uk-subnav-pill uk-subnav-divider">
|
|
<li class="uk-active uk-first-column">
|
|
<a id="toggle_draw" href="#" uk-tooltip="Create cards to add to the game.">Create</a></li>
|
|
<li>
|
|
<a id="toggle_play" href="#">
|
|
<span class="uk-badge uk-badge-notification" style="padding: 2px 5px;">-</span>
|
|
|
|
Play
|
|
|
|
<span id="game-status" class="uk-label"></span>
|
|
</a></li>
|
|
<li class="game-status uk-flex" style='flex-direction:column;'>
|
|
<div class="players-indicator">PLAYERS: <span id="number-of-players"></span></div>
|
|
<!--div class="turn-indicator">TURN: <span id="current-player-turn" uk-tooltip="It's time to choose who will pull the first card." class="meta-turn">PRE-GAME</span></div-->
|
|
</li>
|
|
<!--li>
|
|
<a id="toggle_chat" uk-toggle href="#chat">
|
|
Chat
|
|
</a></li-->
|
|
</ul>
|
|
</div>
|
|
<div id="draw_mode" class="game-mode uk-flex uk-text-center">
|
|
<div class="welcome-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
|
|
<h1 class="card-title uk-text-xlarge uk-margin-large-bottom">Welcome!</h1>
|
|
<div class="card-picture uk-flex uk-flex-center">
|
|
<img class="card-picture" src="/img/logo.png" />
|
|
</div>
|
|
<div class="card-content uk-flex uk-flex-center">
|
|
<p>
|
|
To get started, grab a blank card from the pile.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="new-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
|
|
<input class="card-title uk-text-xlarge uk-margin-large-bottom" placeholder="Title"/>
|
|
<div class="card-picture uk-flex uk-flex-center uk-inline">
|
|
<img class="card-picture" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0yMjguMTg0LDE0My41djExM2gxNDMuNjMydi0xMTNIMjI4LjE4NHogTTM2MC4yNDQsMjQ0LjI0N0gyNDAuNDM3di04OC40OTRoMTE5LjgwOEwzNjAuMjQ0LDI0NC4yNDcNCgkJTDM2MC4yNDQsMjQ0LjI0N3oiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjI0Ni44ODEsMjM0LjcxNyAyNzEuNTcyLDIwOC43NjQgMjgwLjgyNCwyMTIuNzY4IDMxMC4wMTYsMTgxLjY4OCAzMjEuNTA1LDE5NS40MzQgDQoJCTMyNi42ODksMTkyLjMwMyAzNTQuNzQ2LDIzNC43MTcgCSIvPg0KCTxjaXJjbGUgZmlsbD0iI0Q4RDhEOCIgY3g9IjI3NS40MDUiIGN5PSIxNzguMjU3IiByPSIxMC43ODciLz4NCjwvZz4NCjwvc3ZnPg0K" />
|
|
<div class="image-tools uk-flex uk-overlay-default uk-position-center">
|
|
<a class="image-tool" id="imageSearch" uk-icon="icon: search; ratio:2" uk-tooltip="title: Search" uk-toggle="target: #imageModal"></a>
|
|
<!--a class="image-tool" id="imageInsta" uk-icon="icon: instagram; ratio: 2" uk-tooltip="Instagram"></a>
|
|
<div class="uploader" uk-form-custom style="margin:1em;" uk-tooltip="Upload">
|
|
<input type="file">
|
|
<a style="margin:0px;" class="image-tool" id="imageUpload" uk-icon="icon: upload; ratio: 2"></a></div>
|
|
<a class="image-tool" id="imageDraw" uk-icon="icon: pencil; ratio: 2" uk-tooltip="Draw"></a-->
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-content uk-flex uk-flex-center">
|
|
<textarea class="card-content-box"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="controls uk-margin-top">
|
|
<div class="uk-flex uk-flex-center">
|
|
<ul class="uk-subnav uk-subnav-pill">
|
|
<li><a id="newCard" href="#">New</a></li>
|
|
<li class="uk-active"> <a id="submitCard" class="uk-subnav-pill" href="#">Submit</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="play_mode" class="game-mode uk-flex uk-text-center">
|
|
<div uk-slider="center:true;finite:true;" class="players-list-container uk-flex uk-flex-center uk-width-1-1">
|
|
<ul class="players-list uk-slider-items uk-width-medium">
|
|
|
|
</ul>
|
|
<div id="profileModal" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<div class="uk-width-1-1 uk-search uk-margin-small-bottom" id="profileModalContent">
|
|
<input id="manualProfile" class="uk-search-input" placeholder="Choose from below or enter a URL..." />
|
|
</div>
|
|
<div id='manualProfileImage' class="uk-flex uk-flex-center">
|
|
<a id="manual-img-href" href=""><img id="manual-img" src=""/></a>
|
|
</div>
|
|
<hr/>
|
|
<div id="profile-options" class="uk-flex uk-flex-center uk-flex-wrap">
|
|
|
|
</div>
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pick-first-turn" class="welcome-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
|
|
<div>
|
|
<h2 style="margin-bottom:20px"><b class="currentPlayer"></b>'s turn</h2>
|
|
<h4 style="margin-top:0px;">Their card will appear here if they choose to share it.</h4>
|
|
</div>
|
|
<ul id="first-player-picker" class="players-list-text uk-flex uk-flex-center">
|
|
</ul>
|
|
</div>
|
|
<div id='card-view' class="active-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
|
|
<span class="uk-label your-card-" style="display:none;">your card</span>
|
|
<h1 class="card-title uk-text-xlarge uk-margin-large-bottom"> </h1>
|
|
<div class="card-picture uk-flex uk-flex-center">
|
|
<img class="card-picture" src="" />
|
|
</div>
|
|
<div class="card-content uk-flex uk-flex-center">
|
|
|
|
</div>
|
|
</div> <!-- active-card -->
|
|
<div class="uk-margin-top revealed-card-notice">
|
|
<h2>
|
|
Waiting for <b class='currentPlayer'></b> to finish their turn...
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="active-card-controls uk-margin-top">
|
|
<div class="uk-flex uk-flex-center">
|
|
<ul class="uk-subnav uk-subnav-pill">
|
|
<li class="card-control reveal-card"><a onClick="revealCard()" id="revealCard" href="#">Reveal Card</a></li>
|
|
<li class="card-control done-with-card"> <a onClick="doneWithCard()" id="doneWithCard" class="uk-subnav-pill" href="#">Done</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat" class="uk-flex tm-sidebar-left" style="display:none;">
|
|
<h3 class="uk-text-center">
|
|
<img style="height:2em;" src="/img/chat.png"/></h3>
|
|
<ul id="chatbox" class="uk-container uk-text-left uk-width-1-1 uk-height-1-1" style="overflow-y:scroll;">
|
|
</ul>
|
|
<div>
|
|
<div class="uk-form-row uk-width-1-1 uk-text-center">
|
|
<label class="uk-form-label uk-width-1-4">You are:</label>
|
|
<input class="uk-width-1-2 uk-margin-left uk-form-blank uk-text-primary input-username" id="username" value="unnamed"/>
|
|
</div>
|
|
<form class="uk-form uk-container uk-width-1-1" style="font-size:12px;">
|
|
<div class="uk-form-row uk-width-1-1">
|
|
<textarea id="message" class="uk-textarea uk-margin-small-right uk-width-7-10" type="text" placeholder=""></textarea>
|
|
<a type="submit" onClick="submitMessage()" class="uk-margin uk-icon-button uk-icon-commenting-o uk-width-2-10"></a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div id="imageModal" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<form class='uk-search uk-search-large' id="imageModalContent">
|
|
<a href="#" id="giphySearchButton" class="uk-search-icon-flip" uk-search-icon></a>
|
|
<input id="giphySearch" class="uk-search-input" placeholder="Search GIPHY..." />
|
|
</form>
|
|
<div id="giphySearchResults" class="uk-flex uk-flex-center uk-flex-wrap">
|
|
|
|
</div>
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|