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.
151 lines
6.0 KiB
HTML
151 lines
6.0 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 padding-horizontal 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 popup-close" onclick="router.navigate('/profile/' + playerProfile.id + '/' + playerProfile.name);">
|
|
<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 dark-popup padding-horizontal" id="place-popup">
|
|
<h1 id="place-title"></h1>
|
|
|
|
<div id="place-info" class="display-none">
|
|
<div class="row align-content-center">
|
|
<div class="col-50">
|
|
<img src="img/place/white.png" id="place-image" />
|
|
<span class="progressbar" id="place-health-bar" data-progress="0"></span>
|
|
</div>
|
|
<div class="col-50">
|
|
<h3>Actions</h3>
|
|
<div class="bg-color-primary action-button margin-bottom" id="magic-action-button">
|
|
<i class="game-icon game-icon-magic-swirl fa-2x"></i>
|
|
<span id="magic-action-label">Magic</span>
|
|
</div>
|
|
<h3>Artifacts</h3>
|
|
<div id="place-artifact-list">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="preloader color-white" style="width: 44px; height: 44px"></div>
|
|
</div>
|
|
|
|
<div id="place-error-msg" class="display-none"></div>
|
|
|
|
<div class="fab fab-center-bottom">
|
|
<a href="#" class="popup-close" data-popup="#place-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> |