Added screenshots

pgaskin · Jul 22, 2017 · e8d5336 · e8d5336
1 parent d6d0774
commit e8d5336
Showing 1 changed file with 58 additions and 3 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,6 +9,7 @@
     <link rel="stylesheet" href="style.css">
     <meta name="description" content="BookBrowser is a web-based ebook server supporting ePub and PDF. Features include search, a web-based reader, a responsive ui, and more.">
 </head>
+
 <body>
     <div class="container">
         <div class="nav">
@@ -21,11 +23,12 @@
                 <a href="https://github.com/geek1011/BookBrowser" class="item">GitHub</a>
             </div>
         </div>
-        
+
         <div class="masthead">
             <div class="left">
                 <div class="header">BookBrowser</div>
-                <div class="description">A web-based ebook server supporting ePub and PDF. Features include search, a web-based reader, a responsive ui, and more.</div>
+                <div class="description">A web-based ebook server supporting ePub and PDF. Features include search, a web-based reader, a responsive
+                    ui, and more.</div>
                 <a href="#download" class="download button">Download Now<br><small>Windows, Linux, macOS</small></a>
                 <a href="https://bookbrowser-demo.geek1011.net" class="demo button">Demo<br><small>Usually availaible</small></a>
             </div>
@@ -53,7 +56,8 @@
             </div>
             <div class="feature">
                 <div class="name">Web-Based Reader</div>
-                <div class="description">BookBrowser includes a highly customizable web-based reader so you can read your books from any device. You can try it <a href="https://geek1011.github.io/ePubViewer">here</a>.</div>
+                <div class="description">BookBrowser includes a highly customizable web-based reader so you can read your books from any device. You
+                    can try it <a href="https://geek1011.github.io/ePubViewer">here</a>.</div>
             </div>
             <div class="feature">
                 <div class="name">Sort</div>
@@ -69,6 +73,56 @@
             </div>
         </div>
 
+        <div class="section" id="screenshots">
+            <div class="title">Screenshots</div>
+            <div class="body">
+                <table>
+                    <thead>
+                        <tr>
+                            <th><a href="screenshots/books-mobile.png" target="_blank"><img src="screenshots/books-mobile.png" alt="" style="max-width:100%;"></a></th>
+                            <th><a href="screenshots/authors-mobile.png" target="_blank"><img src="screenshots/authors-mobile.png" alt="" style="max-width:100%;"></a></th>
+                            <th><a href="screenshots/search-mobile.png" target="_blank"><img src="screenshots/search-mobile.png" alt="" style="max-width:100%;"></a></th>
+                            <th><a href="screenshots/book-mobile.png" target="_blank"><img src="screenshots/book-mobile.png" alt="" style="max-width:100%;"></a></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><a href="screenshots/books-desktop.png" target="_blank"><img src="screenshots/books-desktop.png" alt="" style="max-width:100%;"></a></td>
+                            <td><a href="screenshots/authors-desktop.png" target="_blank"><img src="screenshots/authors-desktop.png" alt="" style="max-width:100%;"></a></td>
+                            <td><a href="screenshots/search-desktop.png" target="_blank"><img src="screenshots/search-desktop.png" alt="" style="max-width:100%;"></a></td>
+                            <td><a href="screenshots/book-desktop.png" target="_blank"><img src="screenshots/book-desktop.png" alt="" style="max-width:100%;"></a></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <table>
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><a href="screenshots/reader-desktop.png" target="_blank"><img src="screenshots/reader-desktop.png" alt="" style="max-width:100%;"></a></td>
+                            <td><a href="screenshots/reader-mobile.png" target="_blank"><img src="screenshots/reader-mobile.png" alt="" style="max-width:100%;"></a></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <table>
+                    <thead>
+                        <tr>
+                            <th><a href="screenshots/list-desktop.png" target="_blank"><img src="screenshots/list-desktop.png" alt="" style="max-width:100%;"></a></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
         <div class="section">
             <div class="title">System Requirements</div>
             <div class="body">
@@ -94,4 +148,5 @@
         </div>
     </div>
 </body>
+
 </html>