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.


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