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 class="stat" id="quirk" title="Look at that brian of yours...">
  96                     <h6 class="d-inline legend stat-icon QUIRK">Quirk: </h6>
  97                     <span class="text"></span>
  98                     <i class="fa fa-chevron-up stat-increase animated" data-stat="quirk"></i>
  99                   </div>
 100                 </div>
 101                 <div class="col-3">
 102                   <div class="stat" id="aha" title="Eureka! - Magne Furuholmen">
 103                     <h6 class="d-inline legend stat-icon AHA">Aha: </h6>
 104                     <span class="text"></span>
 105                     <i class="fa fa-chevron-up stat-increase animated" data-stat="aha"></i>
 106                   </div>
 107                   <div class="stat" id="luck" title="What just happened!?!?!">
 108                     <h6 class="d-inline legend stat-icon LUCK">Luck: </h6>
 109                     <span class="text"></span>
 110                     <i class="fa fa-chevron-up stat-increase animated" data-stat="luck"></i>
 111                   </div>
 112                   <div class="stat" id="wow" title="Simply... Stunning...">
 113                     <h6 class="d-inline legend stat-icon WOW">Wow: </h6>
 114                     <span class="text"></span>
 115                     <i class="fa fa-chevron-up stat-increase animated" data-stat="wow"></i>
 116                   </div>
 117                   <div class="stat hidden" id="stp">
 118                     <h6 class="d-inline legend stat-icon STP">STP: </h6>
 119                     <span class="text"></span>
 120                     <i class="fa fa-chevron-up stat-increase animated" data-stat="stp"></i>
 121                   </div>
 122                 </div>
 123               </div>
 124             </div>
 125           </div>
 126
 127           <div id="alerts"></div>
 128
 129           <div id="main-info-section" class="card mb-3">
 130             <div class="card-body">
 131               <ul class="nav nav-tabs" id="myTab" role="tablist">
 132                 <li class="nav-item" role="presentation">
 133                   <a class="nav-link active" id="explore-tab" data-toggle="tab" href="#explore" role="tab"
 134                                                                                                 aria-controls="explore" aria-selected="false">Explore</a>
 135                 </li>
 136                 <li class="nav-item" role="presentation">
 137                   <a class="nav-link" id="inventory-tab" data-toggle="tab" href="#inventory" role="tab"
 138                                                                                              aria-controls="inventory" aria-selected="false">Inventory</a>
 139                 </li>
 140                 <li class="nav-item" role="presentation">
 141                   <a class="nav-link" id="quests-tab" data-toggle="tab" href="#quests" role="tab"
 142                                                                                        aria-controls="quests" aria-selected="false">Quests</a>
 143                 </li>
 144               </ul>
 145               <div class="tab-content bg-white" id="myTabContent">
 146                 <div class="tab-pane fade show active p-2" id="explore" role="tabpanel" aria-labelledby="explore-tab">
 147                   <div class="card-body">
 148                     <div id="action-log" class="log"></div>
 149                     <div id="actions" class="text-center">
 150                       <button type="button" id="explore-action" class="btn btn-success">Explore</button>
 151                       <button type="button" id="fight" disabled class="btn btn-danger hidden">Fight</button>
 152                       <button type="button" id="next-biome" disabled class="btn btn-success hidden">Enter</button>
 153                     </div>
 154                   </div>
 155                 </div>
 156                 <div class="tab-pane fade p-2" id="inventory" role="tabpanel" aria-labelledby="explore-tab">
 157                   <div class="card-body">
 158                     <div class="row">
 159                       <div class="col-8">
 160                         <div class="content text-center"></div>
 161                       </div>
 162                       <div class="col-4">
 163                         <div class="desc hidden"></div>
 164                       </div>
 165                     </div>
 166                     <div class="currency-section">
 167                       <hr />
 168                       <div class="text-center">
 169                         <div class="currency steel" id="currency-steel" title="Steel"></div>
 170                       </div>
 171                       <hr />
 172                     </div>
 173                   </div>
 174                 </div>
 175                 <div class="tab-pane fad p-2" id="quests" role="tabpanel" aria-labelledby="quests-tab">
 176                   <div class="card-body p-0" id="quest-list">
 177                     <ul class="list-group list-group-flush content border-0"></ul>
 178                   </div>
 179                 </div>
 180               </div>
 181             </div>
 182           </div>
 183
 184           <div id="chat-info-section mb-3" class="card">
 185             <div class="card-body">
 186               <ul class="nav nav-tabs" id="myTab" role="tablist">
 187                 <li class="nav-item" role="presentation">
 188                   <a class="nav-link active" id="chat-tab" data-toggle="tab" href="#chat" role="tab"
 189                                                                                           aria-controls="chat" aria-selected="true">Chat</a>
 190                 </li>
 191                 <li class="nav-item" role="presentation">
 192                   <a class="nav-link" id="log-tab" data-toggle="tab" href="#info-log" role="tab"
 193                                                                                       aria-controls="info-log" aria-selected="false">Log</a>
 194                 </li>
 195                 <li class="nav-item" role="presentation">
 196                   <a class="nav-link" id="online-users-tab" data-toggle="tab" href="#online-users" role="tab"
 197                                                                                                    aria-controls="online-users" aria-selected="false">Online</a>
 198                 </li>
 199               </ul>
 200               <div class="tab-content bg-white" id="myTabContent">
 201                 <div class="tab-pane fade show active p-2" id="chat" role="tabpanel" aria-labelledby="chat-tab">
 202                   <div id="chat-message-container"></div>
 203                   <div class="input-group align-bottom">
 204                     <input type="text" id="chat-text" class="form-control form-control-sm" placeholder="Recipient's username"
 205                                                                                            aria-label="Your message" aria-describedby="basic-addon2">
 206                     <div class="input-group-append">
 207                       <button class="btn-sm btn-outline-info" type="button" id="send">Send
 208                         <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">
 209                           <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"/>
 210                         </svg>
 211
 212                       </button>
 213                     </div>
 214                   </div>
 215                 </div>
 216                 <div class="tab-pane fade log content p-2" id="info-log" role="tabpanel" aria-labelledby="log-tab"></div>
 217                 <div class="tab-pane fade p-2" id="online-users" role="tabpanel" aria-labelledby="contact-tab">
 218                 </div>
 219               </div>
 220             </div>
 221           </div>
 222         </div>
 223       </div>
 224     </div>
 225   </body>
 226
 227   <script src="./bundle.js"></script>
 228 </html>