|
|
|
<!-- 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">
|
|
|
|
<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/home.js"></script>
|
|
|
|
|
|
|
|
</div>
|