Advanced Search

Calibre Remote - HTML

/ Published in: HTML
Save to your folder(s)
forms part of our Calibre Remote. an alternate gui for calibre ebooks content-server. this is the html files that contains the basic layout and brings it all together.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <meta http-equiv="keywords" content="" />
  7.         <meta http-equiv="description" content="" />
  8.  
  9.         <meta name="viewport" content="width=device-width" />
  10.  
  11.         <title>Calibre Remote WebApp - by pixaweb.co.uk</title>
  12.  
  13.         <link rel="shortcut icon" href="favicon.png" />
  14.  
  15.         <link rel="stylesheet" href="css/calibre.css" type="text/css" media="screen,print,projection,mobile" />
  16.  
  17.         <script type="text/javascript" src="js/jquery.js"></script>
  18.  
  19.     </head>
  20.  
  21.     <body>
  22.  
  23.         <div id="wrapper">
  24.  
  25.             <header id="header">
  26.  
  27.                 <hgroup>
  28.                     <h1>Calibre Remote Web App</h1>
  29.                     <p>by <a href="http://www.pixaweb.co.uk" target="_blank">Pixaweb.co.uk <img src="favicon.png" alt="Pixaweb - London Web Development" /></a></p>
  30.                 </hgroup>
  31.  
  32.                 <section id="server" class="server panel hidden float-left">
  33.                     <section>
  34.                         <div id="host" class="hidden"></div>
  35.                         <div id="port" class="hidden"></div>
  36.                         <div id="username" class="hidden"></div>
  37.                         <div id="password" class="hidden"></div>
  38.                     </section>
  39.                 </section>
  40.  
  41.                 <section id="search" class="search panel float-left">
  42.                     <header>
  43.                         <h1>Search</h1>
  44.                     </header>
  45.                     <section>
  46.                         <input type="text" name="search" value="" class="search" />
  47.                         <a href="#search" class="search button">Search</a>
  48.                     </section>
  49.                 </section>
  50.  
  51.                 <section id="order" class="order panel float-left">
  52.                     <header>
  53.                         <h1>Order</h1>
  54.                     </header>
  55.                     <section>
  56.                         <ul>
  57.                             <li>
  58.                                 <a href="order/ascending" class="active qs-link button">Ascending</a>
  59.                             </li>
  60.                             <li>
  61.                                 <a href="order/descending" class="qs-link button">Descending</a>
  62.                             </li>
  63.                         </ul>
  64.                     </section>
  65.                 </section>
  66.  
  67.                 <section id="sort" class="sort panel float-left">
  68.                     <header>
  69.                         <h1>Sort</h1>
  70.                     </header>
  71.                     <section>
  72.                         <ul>
  73.                             <li class="float-left">
  74.                                 <a href="sort/title" class="active qs-link button">Title</a>
  75.                             </li>
  76.                             <li class="float-right">
  77.                                 <a href="sort/author" class="qs-link button">Author</a>
  78.                             </li>
  79.                             <li class="float-left float-left-clear">
  80.                                 <a href="sort/date" class="qs-link button">Date</a>
  81.                             </li>
  82.                             <li class="float-right float-right-clear">
  83.                                 <a href="sort/series" class="qs-link button">Series</a>
  84.                             </li>
  85.                         </ul>
  86.                     </section>
  87.                 </section>
  88.  
  89.                 <div class="float-clear"></div>
  90.  
  91.             </header>
  92.  
  93.             <section id="content">
  94.  
  95.                 <article class="server config">
  96.  
  97.                     <header>
  98.                         <h1>Server Config</h1>
  99.                     </header>
  100.  
  101.                     <section>
  102.  
  103.                         <dl>
  104.  
  105.                             <dt>Host</dt>
  106.                             <dd><input type="text" name="host" /></dd>
  107.  
  108.                             <dt>Port</dt>
  109.                             <dd><input type="text" name="port" value="8080" /></dd>
  110.  
  111.                             <dt>Username</dt>
  112.                             <dd><input type="text" name="username" /></dd>
  113.  
  114.                             <dt>Password</dt>
  115.                             <dd><input type="password" name="password" /></dd>
  116.  
  117.                             <dt></dt>
  118.                             <dd><a class="button save server" href="#connect">Connect</a></dd>
  119.  
  120.                         </dl>
  121.  
  122.                     </section>
  123.  
  124.                 </article>
  125.  
  126.             </section>
  127.  
  128.         </div>
  129.  
  130.         <footer id="footer">
  131.  
  132.             <div class="logo">
  133.                 <a href="http://www.pixaweb.co.uk" target="_blank">Pixaweb - London Web Development</a>
  134.             </div>
  135.  
  136.             <div class="copyright">
  137.                 <p>Copyright &copy; 2010 Pixaweb.co.uk</p>
  138.             </div>
  139.  
  140.             <div class="privacy">
  141.                 <p>Server details are stored temporarily inside page elements; refreshing the page will mean they are reset to defaults. Please see <a href="http://www.pixaweb.co.uk/projects/Calibre" target="_blank">http://www.pixaweb.co.uk/projects/Calibre</a> for the Source Code.</p>
  142.             </div>
  143.  
  144.         </footer>
  145.  
  146.     </body>
  147.  
  148.     <script type="text/javascript" src="js/calibre.js"></script>
  149.  
  150. </html>

URL: http://www.pixaweb.co.uk/calibre/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.