BookStack Code Mirror - website/blob - public/index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="initial-scale=1">
 7     <title>BookStack | A Simple and Free Documenation Platform</title>
 8     <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Material+Icons' rel='stylesheet' type='text/css'>
 9     <link rel="stylesheet" href="dist/styles.min.css">
 10 </head>
 11
 12 <body>
 13     <script>
 14     // Standard Google Analytics Stuff
 15     (function(i, s, o, g, r, a, m) {
 16         i['GoogleAnalyticsObject'] = r;
 17         i[r] = i[r] || function() {
 18             (i[r].q = i[r].q || []).push(arguments)
 19         }, i[r].l = 1 * new Date();
 20         a = s.createElement(o),
 21             m = s.getElementsByTagName(o)[0];
 22         a.async = 1;
 23         a.src = g;
 24         m.parentNode.insertBefore(a, m)
 25     })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 26
 27     ga('create', 'UA-61486258-4', 'auto');
 28     ga('send', 'pageview');
 29     </script>
 30
 31     <header id="header">
 32         <div class="container">
 33             <div class="row">
 34                 <div class="col-sm-4">
 35                     <div class="logo">
 36                         <img src="logo.svg" alt="BookStack">
 37                         <h1>BookStack</h1>
 38                     </div>
 39                 </div>
 40                 <div class="col-sm-8 menu">
 41                     <a href="#features"><i class="material-icons">stars</i> Features</a>
 42                     <a href="#demo"><i class="material-icons">touch_app</i> Demo</a>
 43                     <a href="#screenshots"><i class="material-icons">image</i> Screenshots</a>
 44                     <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><i class="material-icons">code</i> Github</a>
 45                     <a href="/blog" target="_blank"><i class="material-icons">rss_feed</i> Blog</a>
 46                 </div>
 47             </div>
 48             <div class="row">
 49                 <div class="col-md-4 spaced">
 50                     <h2 >Simple &amp; Free Documentation</h2>
 51                     <p>BookStack is a simple, self-hosted, easy-to-use platform for organising and storing information.</p>
 52                     <a href="https://github.com/ssddanbrown/BookStack" class="button pos "  target="_blank">View on GitHub</a>
 53                 </div>
 54                 <div class="col-md-8 screenshot-container">
 55                     <img class="screenshot" src="images/bookstack-hero-screenshot.png" alt="BookStack ScreenShot">
 56                 </div>
 57             </div>
 58         </div>
 59     </header>
 60     <div class="container md-margin-top">
 61         <h2 id="features">Features</h2>
 62         <div class="row">
 63             <div class="col-sm-4">
 64                 <h3><i class="material-icons">code</i>Free &amp; Open Source</h3>
 65                 <p>BookStack is fully free and open, MIT licensed. The source is available on GitHub. There is no cost to downloading and installing your own instance of bookstack.
 66                 </p>
 67                 <p>
 68                     <a href="https://github.com/ssddanbrown/BookStack">View the source here &raquo;</a>
 69                 </p>
 70             </div>
 71             <div class="col-sm-4" >
 72                 <h3><i class="material-icons">laptop_chromebook</i>Easy, Simple Interface</h3>
 73                 <p>
 74                     Simplicity has been the top priority when building BookStack. The page editor has a simple WYSIWYG interface and all content is broken into three simple real world groups:
 75                 </p>
 76                 <p>
 77                     <i class="material-icons text-book">book</i> Books &nbsp;&nbsp;<i class="material-icons text-chapter">collections_bookmark</i> Chapters&nbsp;&nbsp; <i class="material-icons text-page">description</i> Pages
 78                 </p>
 79             </div>
 80             <div class="col-sm-4" >
 81                 <h3><i class="material-icons">search</i>Searchable and Connected</h3>
 82                 <p>
 83                     The content in BookStack is fully searchable. You are able to search at book level or across all books, chapters &amp; pages. The ability to link directly to any paragraph allows you to keeps your documentation connected.
 84                 </p>
 85             </div>
 86         </div>
 87         <p>
 88             <br>
 89         </p>
 90         <div class="row">
 91             <div class="col-sm-4">
 92                 <h3><i class="material-icons">build</i>Configurable</h3>
 93                 <p>
 94                     Configuration options allow you to set-up BookStack to suit your use case. You can change the name, Logo and registration options. You can also change whether the whole system is publicly viewable or not.
 95                 </p>
 96             </div>
 97             <div class="col-sm-4" >
 98                 <h3><i class="material-icons">storage</i>Simple Requirements</h3>
 99                 <p>
 100                     BookStack is built using PHP, on top of the Laravel framework and it uses MySQL to store data. Performance has been kept in mind and BookStack can run happily on a $5 Digital Ocean VPS.
 101                 </p>
 102             </div>
 103             <div class="col-sm-4" >
 104                 <h3><i class="material-icons">directions_boat</i>Powerful Features</h3>
 105                 <p>
 106                     On top of the powerful search and linking there is also cross-book sorting, Page revisions, Image management. Some more mega-features are planned such as static-site generation and quick exporting.
 107                 </p>
 108             </div>
 109         </div>
 110     </div>
 111     <div class="shaded md-margin-top padded-vertical large">
 112         <div class="container">
 113                 <div class="row">
 114                         <div class="col-sm-6">
 115                                 <h2 class="nomargin margin-bottom " id="demo">Try Out BookStack</h2>
 116                                 <p>
 117                                         You can try out BookStack right now by using the given details.
 118                                         <strong>The demo database &amp; image storage is automatically reset every half hour.</strong>
 119                                         Most standard actions are available using the provided admin login but some actions, listed below, have been restricted to keep the demo instance open &amp; available. That said, all options &amp; actions are at least visible to the demo admin user.
 120                                 </p>
 121                                         <div>
 122                                                 <strong>Actions Restricted In Demo</strong>
 123                                                 <ul>
 124                                                         <li>User deletion</li>
 125                                                         <li>User updates</li>
 126                                                         <li>Setting updates</li>
 127                                                 </ul>
 128                                         </div>
 129                         </div>
 130                         <div class="col-sm-6 text-center">
 131                                         <div class="demo-box text-left " >
 132                                                 <label>Demo Site Url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br>
 133                                                 <label>Admin Email</label> <br><input type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br>
 134                                                 <label>Admin Password</label> <br><input type="text" onclick="this.select();" value="password" readonly="true"> <br><br>
 135                                                 <a href="https://demo.bookstackapp.com" class="button" target="_blank">Open Demo Site</a>
 136                                         </div>
 137                         </div>
 138                 </div>
 139         </div>
 140     </div>
 141
 142         <div class="padded-vertical large">
 143                 <div class="container">
 144                         <h2 class="nomargin margin-bottom" id="screenshots">Screenshots</h2>
 145                         <div class="my-gallery">
 146                                 <div class="row">
 147                                         <div class="col-sm-4 col-xs-6">
 148                                                 <h3>Page View</h3>
 149                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 150                                                     <a href="images/screenshots/page-view.png" data-size="1920x1080">
 151                                                         <img src="images/screenshots/thumb_page-view.png" alt="Page View">
 152                                                     </a>
 153                                                 </figure>
 154                                         </div>
 155                                         <div class="col-sm-4 col-xs-6">
 156                                                 <h3>Page Editor</h3>
 157                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 158                                                     <a href="images/screenshots/page-edit.png" data-size="1920x1080">
 159                                                         <img src="images/screenshots/thumb_page-edit.png" alt="Page Editing">
 160                                                     </a>
 161                                                 </figure>
 162                                         </div>
 163                                         <div class="col-sm-4 col-xs-6">
 164                                                 <h3>Image Manager</h3>
 165                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 166                                                     <a href="images/screenshots/image-manager.png" data-size="1920x1080">
 167                                                         <img src="images/screenshots/thumb_image-manager.png" alt="Image Manager">
 168                                                     </a>
 169                                                 </figure>
 170                                         </div>
 171                                 </div>
 172
 173                                 <div class="row">
 174                                         <div class="col-sm-4 col-xs-6">
 175                                                 <h3>All Books Overview</h3>
 176                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 177                                                     <a href="images/screenshots/books-view.png" data-size="1920x1080">
 178                                                         <img src="images/screenshots/thumb_books-view.png" alt="View of all books">
 179                                                     </a>
 180                                                 </figure>
 181                                         </div>
 182                                         <div class="col-sm-4 col-xs-6">
 183                                                 <h3>Book Overview</h3>
 184                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 185                                                     <a href="images/screenshots/book-overview.png" data-size="1920x1080">
 186                                                         <img src="images/screenshots/thumb_book-overview.png" alt="Book Overview">
 187                                                     </a>
 188                                                 </figure>
 189                                         </div>
 190                                         <div class="col-sm-4 col-xs-6">
 191                                                 <h3>Book Sorting</h3>
 192                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 193                                                     <a href="images/screenshots/book-sorting.png" data-size="1920x1080">
 194                                                         <img src="images/screenshots/thumb_book-sorting.png" alt="Book Content Sorting View">
 195                                                     </a>
 196                                                 </figure>
 197                                         </div>
 198                                 </div>
 199
 200                                 <div class="row">
 201                                         <div class="col-sm-4 col-xs-6">
 202                                                 <h3>Global Search</h3>
 203                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 204                                                     <a href="images/screenshots/search.png" data-size="1920x1080">
 205                                                         <img src="images/screenshots/thumb_search.png" alt="Searching all content">
 206                                                     </a>
 207                                                 </figure>
 208                                         </div>
 209                                         <div class="col-sm-4 col-xs-6">
 210                                                 <h3>App Settings</h3>
 211                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 212                                                     <a href="images/screenshots/settings-view.png" data-size="1920x1080">
 213                                                         <img src="images/screenshots/thumb_settings-view.png" alt="Settings View">
 214                                                     </a>
 215                                                 </figure>
 216                                         </div>
 217                                         <div class="col-sm-4 col-xs-6">
 218                                                 <h3>Profile Update Page</h3>
 219                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 220                                                     <a href="images/screenshots/profile-edit-view.png" data-size="1920x1080">
 221                                                         <img src="images/screenshots/thumb_profile-edit-view.png" alt="Profile Editing Screen">
 222                                                     </a>
 223                                                 </figure>
 224                                         </div>
 225                                 </div>
 226
 227                         </div>
 228                 </div>
 229         </div>
 230
 231     <footer class="shaded">
 232         <div class="container">
 233             <div class="row">
 234                 <div class="col-sm-6">
 235                         <p>
 236                             BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank">Dan Brown</a>
 237                         </p>
 238                 </div>
 239                 <div class="col-sm-6 menu">
 240                     <a href="#features"><i class="material-icons">stars</i> Features</a>
 241                     <a href="#demo"><i class="material-icons">touch_app</i> Demo</a>
 242                     <a href="#screenshots"><i class="material-icons">image</i> Screenshots</a>
 243                     <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><i class="material-icons">code</i> Github</a>
 244                     <a href="/blog" target="_blank"><i class="material-icons">rss_feed</i> Blog</a>
 245                 </div>
 246             </div>
 247         </div>
 248     </footer>
 249
 250     <!-- Root element of PhotoSwipe. Must have class pswp. -->
 251         <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 252             <div class="pswp__bg"></div>
 253             <div class="pswp__scroll-wrap">
 254                 <div class="pswp__container">
 255                     <div class="pswp__item"></div>
 256                     <div class="pswp__item"></div>
 257                     <div class="pswp__item"></div>
 258                 </div>
 259                 <div class="pswp__ui pswp__ui--hidden">
 260                     <div class="pswp__top-bar">
 261                         <div class="pswp__counter"></div>
 262                         <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 263                         <button class="pswp__button pswp__button--share" title="Share"></button>
 264                         <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 265                         <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 266                         <div class="pswp__preloader">
 267                             <div class="pswp__preloader__icn">
 268                               <div class="pswp__preloader__cut">
 269                                 <div class="pswp__preloader__donut"></div>
 270                               </div>
 271                             </div>
 272                         </div>
 273                     </div>
 274                     <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 275                         <div class="pswp__share-tooltip"></div>
 276                     </div>
 277                     <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
 278                     </button>
 279                     <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
 280                     </button>
 281                     <div class="pswp__caption">
 282                         <div class="pswp__caption__center"></div>
 283                     </div>
 284                 </div>
 285             </div>
 286         </div>
 287
 288     <script src="libs/photoswipe.min.js"></script>
 289     <script src="libs/photoswipe-ui-default.min.js"></script>
 290     <script src="dist/main.min.js"></script>
 291 </body>
 292
 293 </html>