public/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Rising Legends</title>
   5     <meta charset="utf-8">
   6     <!--
   7     <a href="https://www.flaticon.com/free-icons/dawn" title="dawn icons">Dawn icons created by Smashicons - Flaticon</a>
   8     -->
   9     <meta name="viewport" content="width=device-width, initial-scale=1" />
  10     <link rel="stylesheet" href="/assets/css/reset.css">
  11     <link rel="stylesheet" href="/assets/css/game.css">
  12     <link rel="stylesheet" href="/assets/css/sky.css">
  13     <script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
  14     <script src="/socket.io/socket.io.js"></script>
  15   </head>
  16   <body>
  17     <section id="time-of-day"></section>
  18     <div id="view">
  19       <header>
  20         <div class="avatar-container">
  21           <img id="avatar" src="/assets/img/profile-pics/warrior-1.jpg">
  22         </div>
  23         <div id="player-info">
  24           <div id="stat-bars">
  25             <div id="player-section">
  26               <div id="username"></div>
  27               <div class="gold"></div>
  28             </div>
  29             <div id="ap-bar"></div>
  30             <div class="progress-bar" id="hp-bar"></div>
  31             <div class="progress-bar" id="exp-bar"></div>
  32           </div>
  33           <nav>
  34             <li><a href="#" class="active" hx-get="/player" hx-target="#profile">Profile</a></li>
  35             <li><a href="#" hx-get="/player/inventory" hx-target="#inventory">Inventory</a></li>
  36             <li><a href="#" hx-get="/player/skills" hx-target="#skills">Skills</a></li>
  37             <li><a href="#" hx-get="/player/explore" hx-target="#explore">Explore</a></li>
  38           </nav>
  39         </div>
  40       </header>
  41
  42       <div id="signup-prompt" class="hidden"></div>
  43       <div id="announcements" class="hidden"></div>
  44
  45       <div id="alerts"></div>
  46       <div id="modal-wrapper"></div>
  47
  48       <div id="main-nav">
  49         <section id="profile" class="tab active">PROFILE</section>
  50         <section id="inventory" class="tab">INVENTORY</section>
  51         <section id="skills" class="tab">SKILLS</section>
  52         <section id="explore" class="tab">
  53           <div id="map"></div>
  54           <div id="fight"></div>
  55         </section>
  56         <section id="settings" class="tab">
  57           <div>
  58             <p class="alert error">If you haven't set a username/password you will not be able to access this character again.</p>
  59             <p><button class="btn" id="logout">Logout</button></p>
  60           </div>
  61         </section>
  62       </div>
  63
  64       <section id="chat">
  65         <div id="chat-messages" hx-trigger="load delay:1s" hx-get="/chat/history" hx-swap="afterend"></div>
  66         <form id="chat-form" hx-post="/chat">
  67           <input type="text" id="message" name="message" autocomplete="off"><button type="submit">Send</button>
  68         </form>
  69       </section>
  70
  71       <section id="game-footer">
  72         <div>
  73           <nav>
  74             <a href="#" data-section="settings" data-container="main-nav" hx-get="/settings" hx-target="#settings">Settings</a>
  75           </nav>
  76         </div>
  77         <div id="server-stats" hx-trigger="load delay:1s" hx-get="/status" hx-swap="outerHTML">...Loading</div>
  78       </section>
  79
  80       <footer>Another project by <a href="https://xangelo.ca/gardens/rising-legends/">xangelo.ca</a>. <span id="version"></span></footer>
  81     </div>
  82   </body>
  83   <script src="/assets/bundle.js"></script>
  84 </html>