You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

115 lines
4.5 KiB
HTML

<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="page" data-name="home">
<div class="page-content">
<!-- Game map -->
<div id="mapbox">
</div>
<!-- Player info (top-left) -->
<div id="playerinfo">
<div class="display-flex align-items-center">
<div class="usericon">
</div>
<div class="username-healthbar">
<span class="username">
<span class="player-nickname"></span>
<span class="badge margin-left" id="player-level-badge"></span>
</span>
<span data-progress="0" class="progressbar healthbar" id="player-healthbar"></span>
</div>
</div>
</div>
<!-- Chat UI (bottom) -->
<div class="toolbar messagebar" id="messagebar" style="position: absolute; bottom: 0; left: 0; right: 0;">
<div class="margin messages-content display-none" id="messages-content">
<div class="messages" id="messages">
<!-- Messages go here -->
</div>
</div>
<div class="toolbar-inner">
<a class="link toggle-messages">
<span>
<i class="fas fa-comments"></i>
<i class="fas fa-caret-up" id="chattoggle-closed"></i>
<i class="fas fa-caret-down display-none" id="chattoggle-opened"></i>
</span>
</a>
<div class="messagebar-area">
<textarea id="chatbox" placeholder="Chat"></textarea>
</div>
<a class="link" id="sendmsgbtn">Send</a>
</div>
</div>
</div>
<div class="fab fab-right-center">
<a href="#" class="popup-open" data-popup="#menu-popup">
<i class="fas fa-2x fa-bars"></i>
</a>
<a href="#" onclick="scanCode()" class="margin-top">
<i class="fas fa-2x fa-qrcode"></i>
</a>
</div>
<div class="popup display-flex justify-content-center align-items-center dark-popup" id="menu-popup">
<div class="row" id="mainmenu-items">
<div class="col-50 mainmenu-item popup-close" onclick="router.navigate('/inventory');">
<i class="game-icon game-icon-school-bag fa-4x"></i><br />
Items
</div>
<div class="col-50 mainmenu-item">
<i class="game-icon game-icon-shop fa-4x"></i><br />
Shop
</div>
<div class="col-100">
<div class="row">
<div class="col-50 mainmenu-item mainmenu-item-sm">
<i class="fas fa-2x fa-user-circle"></i><br />
Profile
</div>
<div class="col-50 mainmenu-item mainmenu-item-sm popup-close" onclick="router.navigate('/settings');">
<i class="fas fa-2x fa-cog"></i><br />
Settings
</div>
</div>
</div>
</div>
<div class="fab fab-center-bottom">
<a href="#" class="popup-close" data-popup="#menu-popup">
<i class="fas fa-2x fa-times"></i>
</a>
</div>
</div>
<div class="popup display-flex justify-content-center align-items-center dark-popup" id="founditem-popup">
<div class="row">
<div class="col-100 tablet-50 block text-align-center" id="founditem-block">
<i class="fas fa-exclamation fa-4x"></i>
<h1>Item Found!</h1>
<h3>You found one <span id="founditem-name"></span></h3>
</div>
<div class="col-100 tablet-50 block text-align-center display-none" id="foundmunzee-block">
<i class="fas fa-qrcode fa-4x"></i>
<h1>Munzee Found!</h1>
<h3>You found <span id="foundmunzee-name"></span></h3>
</div>
</div>
<div class="fab fab-center-bottom">
<a href="#" class="popup-close" data-popup="#founditem-popup">
<i class="fas fa-2x fa-times"></i>
</a>
</div>
</div>
<script src="js/map.js"></script>
<script src="js/chat.js"></script>
<script src="js/home.js"></script>
</div>