src/public/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Sketchy Heroes</title>
   5     <meta charset="utf-8">
   6     <link rel="stylesheet" href="./css/bootstrap.min.css" />
   7     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
   8     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
   9     <link rel="stylesheet" href="./css/ui.css" />
  10
  11     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  12     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  13     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  14   </head>
  15   <body>
  16     <nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
  17       <a class="navbar-brand" href="/">Sketchy Heroes</a>
  18       <span id="badge-swap" class="badge badge-danger">ALPHA</span>
  19
  20       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
  21                                                                           aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  22         <span class="navbar-toggler-icon"></span>
  23       </button>
  24       <div class="collapse navbar-collapse d-flex flex-row-reverse" id="navbarNavAltMarkup">
  25         <div class="navbar-nav">
  26           <a class="nav-item nav-link" target="_blank" href="https://reddit.com/r/sketchyheroes">Updates</a>
  27           <a class="nav-item nav-link" target="_blank" href="https://www.reddit.com/r/sketchyheroes/wiki/index/faq" id="faq">FAQ</a>
  28           <a class="nav-item nav-link" href="#" data-toggle="modal" data-target="#privacy-policy">Privacy</a>
  29         </div>
  30       </div>
  31     </nav>
  32     <div class="modal fade" id="privacy-policy" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
  33                                                                                                            aria-labelledby="privacy-policy-label" aria-hidden="true">
  34       <div class="modal-dialog">
  35         <div class="modal-content">
  36           <div class="modal-header">
  37             <h5 class="modal-title" id="privacy-policy-label">Privacy Policy</h5>
  38             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  39               <span aria-hidden="true">&times;</span>
  40             </button>
  41           </div>
  42           <div class="modal-body">
  43             <h5>Your information is your own!</h5>
  44             <p>We only require you to submit a username and password to get started playing.</p>
  45             <p>We suggest that you choose a password that is unique.</p>
  46             <p>If want your information cleared from our databases please contact us at <a href="mailto:privacy@sketchyheroes.com">privacy@sketchyheroes.com</a></p>
  47             <p>For everything else, just shoot us a message at <a href="mailto:info@sketchyheroes.com">info@sketchyheroes</a></p>
  48           </div>
  49         </div>
  50       </div>
  51     </div>
  52     <div id="viewport" class="container-fluid">
  53       <div class="row game-view">
  54         <div class="col-10 offset-1">
  55           <div class="card animated mb-3" id="player-stats">
  56             <div class="card-header">
  57               <h5>
  58                 <span class="name" id="name"></span>
  59               </h5>
  60             </div>
  61             <div class="card-body">
  62               <div class="row">
  63                 <div class="col-6">
  64                   <div id="bar-stats">
  65                     <div class="stat" id="hit">
  66                       <span class="legend stat-icon HIT">HIT</span>
  67                       <div class="progress-bar-wrapper"></div>
  68                     </div>
  69                     <div class="stat" id="sta">
  70                       <span class="legend stat-icon STA">Sta</span>
  71                       <div class="progress-bar-wrapper"></div>
  72                     </div>
  73                     <div class="stat" id="exp">
  74                       <span class="legend stat-icon EXP">Exp</span>
  75                       <div class="progress-bar-wrapper"></div>
  76                     </div>
  77                   </div>
  78                 </div>
  79                 <div class="col-3">
  80                   <div class="stat" id="pow" title="Oh my, so strong. So much POW!">
  81                     <h6 class="d-inline legend stat-icon POW">Pow: </h6>
  82                     <span class="text"></span>
  83                     <i class="fa fa-chevron-up stat-increase animated" data-stat="pow"></i>
  84                   </div>
  85                   <div class="stat" id="zest" title="You have such a ZEST for life">
  86                     <h6 class="d-inline legend stat-icon ZEST">Zest: </h6>
  87                     <span class="text"></span>
  88                     <i class="fa fa-chevron-up stat-increase animated" data-stat="zest"></i>
  89                   </div>
  90                   <div class="stat" id="woosh" title="wOOSH">
  91                     <h6 class="d-inline legend stat-icon WOOSH">Woosh: </h6>
  92                     <span class="text"></span>
  93                     <i class="fa fa-chevron-up stat-increase animated" data-stat="woosh"></i>
  94                   </div>
  95                 </div>
  96                 <div class="col-3">
  97                   <div class="stat" id="aha" title="Eureka! - Magne Furuholmen">
  98                     <h6 class="d-inline legend stat-icon AHA">Aha: </h6>
  99                     <span class="text"></span>
 100                     <i class="fa fa-chevron-up stat-increase animated" data-stat="aha"></i>
 101                   </div>
 102                   <div class="stat" id="luck" title="What just happened!?!?!">
 103                     <h6 class="d-inline legend stat-icon LUCK">Luck: </h6>
 104                     <span class="text"></span>
 105                     <i class="fa fa-chevron-up stat-increase animated" data-stat="luck"></i>
 106                   </div>
 107                   <div class="stat" id="wow" title="Simply... Stunning...">
 108                     <h6 class="d-inline legend stat-icon WOW">Wow: </h6>
 109                     <span class="text"></span>
 110                     <i class="fa fa-chevron-up stat-increase animated" data-stat="wow"></i>
 111                   </div>
 112                   <div class="stat" id="stp">
 113                     <h6 class="d-inline legend stat-icon STP">STP: </h6>
 114                     <span class="text"></span>
 115                     <i class="fa fa-chevron-up stat-increase animated" data-stat="stp"></i>
 116                   </div>
 117                 </div>
 118               </div>
 119             </div>
 120           </div>
 121
 122           <div id="alerts"></div>
 123
 124           <div id="main-info-section" class="card mb-3">
 125             <div class="card-body">
 126               <ul class="nav nav-tabs" id="myTab" role="tablist">
 127                 <li class="nav-item" role="presentation">
 128                   <a class="nav-link active" id="explore-tab" data-toggle="tab" href="#explore" role="tab"
 129                                                                                                 aria-controls="explore" aria-selected="false">Explore</a>
 130                 </li>
 131                 <li class="nav-item" role="presentation">
 132                   <a class="nav-link" id="inventory-tab" data-toggle="tab" href="#inventory" role="tab"
 133                                                                                              aria-controls="inventory" aria-selected="false">Inventory</a>
 134                 </li>
 135                 <li class="nav-item" role="presentation">
 136                   <a class="nav-link" id="quests-tab" data-toggle="tab" href="#quests" role="tab"
 137                                                                                        aria-controls="quests" aria-selected="false">Quests</a>
 138                 </li>
 139               </ul>
 140               <div class="tab-content bg-white" id="myTabContent">
 141                 <div class="tab-pane fade show active p-2" id="explore" role="tabpanel" aria-labelledby="explore-tab">
 142                   <div class="card-body">
 143                     <div id="action-log" class="log"></div>
 144                     <div id="actions" class="text-center">
 145                       <button type="button" id="explore-action" class="btn btn-success">Explore</button>
 146                       <button type="button" id="fight-action" data-fight-id='unset' disabled class="btn btn-danger hidden">Fight</button>
 147                       <button type="button" id="next-biome" disabled class="btn btn-success hidden">Enter</button>
 148                     </div>
 149                   </div>
 150                 </div>
 151                 <div class="tab-pane fade p-2" id="inventory" role="tabpanel" aria-labelledby="explore-tab">
 152                   <div class="card-body">
 153                     <div class="row">
 154                       <div class="col-8">
 155                         <div class="content text-center"></div>
 156                       </div>
 157                       <div class="col-4">
 158                         <div class="desc hidden"></div>
 159                       </div>
 160                     </div>
 161                     <div class="currency-section">
 162                       <hr />
 163                       <div class="text-center">
 164                         <div class="currency steel" id="currency-steel" title="Steel"></div>
 165                       </div>
 166                       <hr />
 167                     </div>
 168                   </div>
 169                 </div>
 170                 <div class="tab-pane fad p-2" id="quests" role="tabpanel" aria-labelledby="quests-tab">
 171                   <div class="card-body p-0" id="quest-list">
 172                     <ul class="list-group list-group-flush content border-0"></ul>
 173                   </div>
 174                 </div>
 175               </div>
 176             </div>
 177           </div>
 178
 179           <div id="chat-info-section mb-3" class="card">
 180             <div class="card-body">
 181               <ul class="nav nav-tabs" id="myTab" role="tablist">
 182                 <li class="nav-item" role="presentation">
 183                   <a class="nav-link active" id="chat-tab" data-toggle="tab" href="#chat" role="tab"
 184                                                                                           aria-controls="chat" aria-selected="true">Chat</a>
 185                 </li>
 186                 <li class="nav-item" role="presentation">
 187                   <a class="nav-link" id="log-tab" data-toggle="tab" href="#info-log" role="tab"
 188                                                                                       aria-controls="info-log" aria-selected="false">Log</a>
 189                 </li>
 190                 <li class="nav-item" role="presentation">
 191                   <a class="nav-link" id="online-users-tab" data-toggle="tab" href="#online-users" role="tab"
 192                                                                                                    aria-controls="online-users" aria-selected="false">Online</a>
 193                 </li>
 194               </ul>
 195               <div class="tab-content bg-white" id="myTabContent">
 196                 <div class="tab-pane fade show active p-2" id="chat" role="tabpanel" aria-labelledby="chat-tab">
 197                   <div id="chat-message-container"></div>
 198                   <div class="input-group align-bottom">
 199                     <input type="text" id="chat-text" class="form-control form-control-sm" placeholder="Recipient's username"
 200                                                                                            aria-label="Your message" aria-describedby="basic-addon2">
 201                     <div class="input-group-append">
 202                       <button class="btn-sm btn-outline-info" type="button" id="send">Send
 203                         <svg class="bi bi-caret-right-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 204                           <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 011.659-.753l5.48 4.796a1 1 0 010 1.506z"/>
 205                         </svg>
 206
 207                       </button>
 208                     </div>
 209                   </div>
 210                 </div>
 211                 <div class="tab-pane fade log content p-2" id="info-log" role="tabpanel" aria-labelledby="log-tab"></div>
 212                 <div class="tab-pane fade p-2" id="online-users" role="tabpanel" aria-labelledby="contact-tab">
 213                 </div>
 214               </div>
 215             </div>
 216           </div>
 217         </div>
 218       </div>
 219     </div>
 220   </body>
 221
 222   <script src="./bundle.js"></script>
 223 </html>