RubyGems - kamishibai - Versions diffs - 0.6.2 - Mend

kamishibai 0.6.2

Files changed (166) hide show

checksums.yaml +7 -0
data/.gitignore +1 -0
data/LICENSE +29 -0
data/README.md +91 -0
data/bin/kamishibai +59 -0
data/changelogs.txt +6 -0
data/images/reading.jpg +0 -0
data/images/settings.jpg +0 -0
data/images/view_browse.jpg +0 -0
data/images/view_dir.jpg +0 -0
data/kamishibai.gemspec +31 -0
data/lib/kamishibai.rb +35 -0
data/lib/kamishibai/book.rb +97 -0
data/lib/kamishibai/config.rb +90 -0
data/lib/kamishibai/database.rb +330 -0
data/lib/kamishibai/functions.rb +332 -0
data/lib/kamishibai/patches.rb +58 -0
data/lib/kamishibai/version.rb +7 -0
data/lib/kamishibai/webserver.rb +502 -0
data/lib/kamishibai/webserver_cmds.rb +26 -0
data/lib/kamishibai/webserver_config.rb +91 -0
data/lib/kamishibai/webserver_filemanager.rb +29 -0
data/lib/kamishibai/webserver_tablet.rb +259 -0
data/lib/kamishibai/workers.rb +39 -0
data/public/css/browse.css +390 -0
data/public/css/config.css +3 -0
data/public/css/reader.css +119 -0
data/public/css/styles.css +30 -0
data/public/css/tablet_browse.css +247 -0
data/public/css/tablet_reader.css +323 -0
data/public/css/tablet_reader_input.css +191 -0
data/public/images/ajax-loader.gif +0 -0
data/public/images/delete.png +0 -0
data/public/images/folder-mini-up.png +0 -0
data/public/images/folder-mini.png +0 -0
data/public/images/spinner.gif +0 -0
data/public/images/trash-empty-mini.png +0 -0
data/public/images/trash-full-mini.png +0 -0
data/public/js/browse.js +391 -0
data/public/js/config.js +190 -0
data/public/js/reader.js +497 -0
data/public/js/swipeview-k.js +478 -0
data/public/js/tablet3.js +241 -0
data/public/js/tablet3_browse.js +173 -0
data/public/js/tablet3_reader.js +534 -0
data/public/js/utilities.js +170 -0
data/public/lang/k-cn.json +82 -0
data/public/lang/k-en.json +82 -0
data/public/lang/k-ja.json +82 -0
data/public/vendor/css/bootstrap-slider.css +252 -0
data/public/vendor/css/bootstrap-theme.css +476 -0
data/public/vendor/css/bootstrap-theme.css.map +1 -0
data/public/vendor/css/bootstrap-theme.min.css +5 -0
data/public/vendor/css/bootstrap.css +6584 -0
data/public/vendor/css/bootstrap.css.map +1 -0
data/public/vendor/css/bootstrap.min.css +5 -0
data/public/vendor/css/jquery-ui-1.10.0.custom.css +1614 -0
data/public/vendor/css/jquery.mobile-1.3.1.min.css +3 -0
data/public/vendor/css/jqueryFileTree.css +91 -0
data/public/vendor/fonts/glyphicons-halflings-regular.eot +0 -0
data/public/vendor/fonts/glyphicons-halflings-regular.svg +288 -0
data/public/vendor/fonts/glyphicons-halflings-regular.ttf +0 -0
data/public/vendor/fonts/glyphicons-halflings-regular.woff +0 -0
data/public/vendor/fonts/glyphicons-halflings-regular.woff2 +0 -0
data/public/vendor/images/application.png +0 -0
data/public/vendor/images/code.png +0 -0
data/public/vendor/images/css.png +0 -0
data/public/vendor/images/db.png +0 -0
data/public/vendor/images/dim.png +0 -0
data/public/vendor/images/directory.png +0 -0
data/public/vendor/images/doc.png +0 -0
data/public/vendor/images/file.png +0 -0
data/public/vendor/images/film.png +0 -0
data/public/vendor/images/flash.png +0 -0
data/public/vendor/images/folder_open.png +0 -0
data/public/vendor/images/grey.png +0 -0
data/public/vendor/images/html.png +0 -0
data/public/vendor/images/icons-18-black.png +0 -0
data/public/vendor/images/icons-18-white.png +0 -0
data/public/vendor/images/icons-36-black.png +0 -0
data/public/vendor/images/icons-36-white.png +0 -0
data/public/vendor/images/java.png +0 -0
data/public/vendor/images/linux.png +0 -0
data/public/vendor/images/music.png +0 -0
data/public/vendor/images/pdf.png +0 -0
data/public/vendor/images/php.png +0 -0
data/public/vendor/images/picture.png +0 -0
data/public/vendor/images/ppt.png +0 -0
data/public/vendor/images/psd.png +0 -0
data/public/vendor/images/ruby.png +0 -0
data/public/vendor/images/script.png +0 -0
data/public/vendor/images/spinner.gif +0 -0
data/public/vendor/images/txt.png +0 -0
data/public/vendor/images/ui-bg_diagonals-thick_18_b81900_40x40.png +0 -0
data/public/vendor/images/ui-bg_diagonals-thick_20_666666_40x40.png +0 -0
data/public/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_10_000000_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_30_cccccc_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_50_5c5c5c_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_55_fbec88_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_75_ffffff_40x100.png +0 -0
data/public/vendor/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_20_555555_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_40_0078a3_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_40_ffc73d_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_55_fbf9ee_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_75_d0e5f5_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_75_dadada_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_75_e6e6e6_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_85_dfeffc_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_95_fef1ec_1x400.png +0 -0
data/public/vendor/images/ui-bg_gloss-wave_25_333333_500x100.png +0 -0
data/public/vendor/images/ui-bg_gloss-wave_35_f6a828_500x100.png +0 -0
data/public/vendor/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_100_eeeeee_1x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_75_cccccc_1x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_80_eeeeee_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-hard_100_f5f8f9_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-hard_100_fcfdfd_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-soft_25_000000_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-soft_30_f58400_1x100.png +0 -0
data/public/vendor/images/ui-icons_217bc0_256x240.png +0 -0
data/public/vendor/images/ui-icons_222222_256x240.png +0 -0
data/public/vendor/images/ui-icons_228ef1_256x240.png +0 -0
data/public/vendor/images/ui-icons_2e83ff_256x240.png +0 -0
data/public/vendor/images/ui-icons_454545_256x240.png +0 -0
data/public/vendor/images/ui-icons_469bdd_256x240.png +0 -0
data/public/vendor/images/ui-icons_4b8e0b_256x240.png +0 -0
data/public/vendor/images/ui-icons_6da8d5_256x240.png +0 -0
data/public/vendor/images/ui-icons_888888_256x240.png +0 -0
data/public/vendor/images/ui-icons_a83300_256x240.png +0 -0
data/public/vendor/images/ui-icons_cccccc_256x240.png +0 -0
data/public/vendor/images/ui-icons_cd0a0a_256x240.png +0 -0
data/public/vendor/images/ui-icons_d8e7f3_256x240.png +0 -0
data/public/vendor/images/ui-icons_ef8c08_256x240.png +0 -0
data/public/vendor/images/ui-icons_f9bd01_256x240.png +0 -0
data/public/vendor/images/ui-icons_ffd27a_256x240.png +0 -0
data/public/vendor/images/ui-icons_ffffff_256x240.png +0 -0
data/public/vendor/images/xls.png +0 -0
data/public/vendor/images/zip.png +0 -0
data/public/vendor/js/bootstrap-slider.js +1550 -0
data/public/vendor/js/bootstrap.js +2317 -0
data/public/vendor/js/bootstrap.min.js +7 -0
data/public/vendor/js/jquery-2.1.4.js +9210 -0
data/public/vendor/js/jquery-2.1.4.min.js +4 -0
data/public/vendor/js/jquery-2.1.4.min.map +1 -0
data/public/vendor/js/jquery-ui-1.10.2.custom.min.js +7 -0
data/public/vendor/js/jquery.cookie.js +72 -0
data/public/vendor/js/jquery.hammer.min.js +7 -0
data/public/vendor/js/jquery.lazyload.min.js +15 -0
data/public/vendor/js/jquery.localize.js +180 -0
data/public/vendor/js/jquery.mobile-1.3.1.min.js +7 -0
data/public/vendor/js/jquery.scrollTo-1.4.3.1.js +218 -0
data/public/vendor/js/jqueryFileTree.js +95 -0
data/public/vendor/js/swipeview.js +471 -0
data/views/browse.haml +97 -0
data/views/config.haml +115 -0
data/views/layout.haml +12 -0
data/views/login.haml +51 -0
data/views/reader.haml +70 -0
data/views/statistics.haml +108 -0
data/views/tablet3.haml +80 -0
metadata +334 -0

data/lib/kamishibai/webserver_cmds.rb ADDED

@@ -0,0 +1,26 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		get '/save_bookmarks' do
+			$db.save_bookmarks
+		end
+		# restart webserver
+		get '/restart' do
+			$RERUN = true
+			Process.kill("TERM", Process.pid)
+			'<html><head><meta http-equiv="refresh" content="5; url=/"></head><body>restarting...</body></html>'
+		end
+		# shutdown kamishibai
+		get '/shutdown' do
+			$RERUN = false
+			Process.kill("TERM", Process.pid)
+		end
+	end
+end

data/lib/kamishibai/webserver_config.rb ADDED

@@ -0,0 +1,91 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		# configuration page, get mode
+		get '/config' do
+			if request['get']
+				case request['get']
+					when 'srcs'
+						# get list of sources
+						content_type :javascript
+						$settings.srcs.to_s
+					when 'prefs'
+						content_type :javascript
+						"g_prefs['port'] = #{ $settings.port };\n" +
+						"g_prefs['new_book_days'] = #{ $settings.new_book_days };\n" +
+						"g_prefs['user'] = \"#{ $settings.username }\";\n" +
+						"g_prefs['pass'] = \"#{ $settings.password }\";\n" +
+						"g_prefs['resize'] = #{ $settings.image_resize };\n" +
+						"g_prefs['quality'] = #{ $settings.default_image_quality };\n"
+					when 'total_books'
+						# get number of books in db
+						content_type :javascript
+						$db.books.length.to_s
+				end
+			else
+				haml :config, :layout => false
+			end
+		end
+		# configuration page, set mode
+		post '/config' do
+			if request['set']
+				case request['set']
+					when 'srcs'
+						# save book sources
+						old_srcs = $settings.srcs.collect { |d|
+							if d[-1..-1] == '/'
+								d[0..-2]
+							else
+								d[0..-1]
+							end
+						}.sort
+						srcs = request['srcs'].split('||||').compact
+						srcs = srcs.collect { |d|
+							if d[-1..-1] == '/'
+								d[0..-2]
+							else
+								d[0..-1]
+							end
+						}.sort
+						$settings.srcs = srcs
+						$settings.save
+						# srcs has changed, reload the whole kamishibai, to reload the db
+						if old_srcs != srcs
+							init_database
+						end
+					when 'prefs'
+						# save settings
+						r = request
+						old_port = $settings.port
+						$settings.port = r['port'].to_i
+						$settings.image_resize = r['resize'] == 'on' ? true : false
+						$settings.username = r['user']
+						$settings.password = r['pass']
+						$settings.new_book_days = r['new_book_days'].to_i
+						$settings.default_image_quality = r['quality'].to_i
+						$settings.save
+						if $settings.port != old_port
+							# restart webserver if port is different from old port
+							$RERUN = true
+							Process.kill("TERM", Process.pid)
+						end
+				end
+			end
+		end
+	end
+end

data/lib/kamishibai/webserver_filemanager.rb ADDED

@@ -0,0 +1,29 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		post '/delete_book' do
+			bookcode = request['bookcode'].untaint
+			fp = $db.get_book(bookcode).fullpath
+			trash_dir = File.dirname( fp ) + '/Trash'
+			unless FileTest.directory?( trash_dir )
+				unless File.stat( File.dirname(fp) ).writable?
+					halt "Error. Directory is read only! #{ File.dirname(fp) }"
+				end
+				Dir.mkdir( trash_dir )
+			end
+			# "#{fp}  ...   #{trash_dir}"
+			File.rename( fp, trash_dir + '/' + File.basename(fp) )
+			"deleted #{File.basename(fp)}"
+		end
+	end
+end

data/lib/kamishibai/webserver_tablet.rb ADDED

@@ -0,0 +1,259 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		helpers do
+		end
+		# show all unique titles
+		post '/lists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by title alphabetically
+			titles = titles.sort { |a, b| a[0] <=> b[0] }
+			c = '  ' # double space instead of 0 byte, so book without title or obscure filename can be group and have divider
+			html = ''
+			titles.each { |title, bookcodes|
+				if c != title[0..0]
+					# add divider
+					c = title[0..0] == '' ? '-' : title[0..0]
+					html << "<li class=\"ui-li-divider\">#{c}</li>\n"
+				end
+				# html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# lists containing newly imported books
+		post '/nlists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.itime
+				next unless Time.now.to_i - book.itime < 3600*24*$settings.new_book_days
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by time last imported
+			titles = titles.sort { |a, b|
+				newest_a = 0
+				a[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).itime
+					newest_a = rtime if rtime and rtime > newest_a
+				}
+				newest_b = 0
+				b[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).itime
+					newest_b = rtime if rtime and rtime > newest_b
+				}
+				newest_b <=> newest_a
+			}
+			html = ''
+			titles.each { |title, bookcodes|
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# lists books that are unfinish reading
+		post '/rlists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.page
+				next unless book.page < book.pages
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by time last read
+			titles = titles.sort { |a, b|
+				newest_a = 0
+				a[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_a = rtime if rtime and rtime > newest_a
+				}
+				newest_b = 0
+				b[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_b = rtime if rtime and rtime > newest_b
+				}
+				newest_b <=> newest_a
+			}
+			html = ''
+			titles.each { |title, bookcodes|
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# lists books that are finish reading
+		post '/flists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.page
+				next unless book.page == book.pages
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by time last read
+			titles = titles.sort { |a, b|
+				newest_a = 0
+				a[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_a = rtime if rtime and rtime > newest_a
+				}
+				newest_b = 0
+				b[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_b = rtime if rtime and rtime > newest_b
+				}
+				newest_b <=> newest_a
+			}
+			html = ''
+			titles.each { |title, bookcodes|
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# show all unique titles
+		post '/alists' do
+			content_type :text
+			authors = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.author
+				next unless pregex.match( book.author )
+				if authors[ book.author ]
+					authors[ book.author ] << book.bookcode
+				else
+					authors[ book.author ] = [ book.bookcode ]
+				end
+			}
+			# sort by author alphabetically
+			authors = authors.sort { |a, b| a[0] <=> b[0] }
+			c = '  ' # double space instead of 0 byte, so book without title or obscure filename can be group and have divider
+			html = ''
+			authors.each { |author, bookcodes|
+				if c != author[0..0]
+					# add divider
+					c = author[0..0] == '' ? '-' : author[0..0]
+					html << "<li class=\"ui-li-divider\">#{c}</li>"
+				end
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\" options=\"sortbyauthor\">#{author.escape_html}</li>\n"
+			}
+			html
+		end
+		# new, combined browse and reader
+		get '/tablet' do
+			cache_control :public, :must_revalidate, :max_age => 1
+			haml :tablet3, :layout => false
+		end
+		# list books ver2
+		get '/listbooks' do
+			content_type :json
+			bookcodes = request['bookcodes'] ? request['bookcodes'].split(',') : []
+			options   = request['options']   ? request['options'].split(',') : []
+			books = {}
+			for bookcode in bookcodes
+				if $db.has_bookcode?( bookcode )
+					book = $db.get_book( bookcode )
+					# book volume/chapter/etc info
+					bn = File.basename( book.fullpath )
+					bn = bn.gsub( File.extname(bn), '' )
+					bn = bn.gsub( book.title, '' )
+					# bn = bn.gsub( bn.replace(/\'/,'&#39;'), '' )
+					bn = bn.gsub( /(\(.+?\))/, '' )
+					bn = bn.gsub( /(\[.+?\])/, '' )
+					bn = bn.gsub( /(\[\])/, '' )
+					bn = bn.gsub( / +/, ' ' )
+					bn.strip!
+					books[bookcode] = {
+						:title  => book.title,
+						:sname  => bn,
+						:author => book.author,
+						:size   => book.size,
+						:mtime  => book.mtime,
+						:itime  => book.itime,
+						:rtime  => book.rtime,
+						:page   => book.page,
+						:pages  => book.pages
+					}
+				end
+			end
+			JSON.pretty_generate( books )
+		end
+	end
+end

data/lib/kamishibai/workers.rb ADDED

@@ -0,0 +1,39 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+require 'thread'
+# worker thread for saving database and bookmarks
+def start_auto_save
+	# run save every 60 seconds
+	Thread.new {
+		while true
+			$db.save
+			$db.save_bookmarks
+			sleep 60
+		end
+	}
+end
+# worker thread for generating thumbnails
+def start_auto_gen_thumbnail
+	$open_cbz_ltime = Time.now - 61 # holds the last time the open_cbz is called
+	Thread.new {
+		puts "************* Start Generating Thumbnails *************"
+		for bookcode, obj in $db.books
+			# if the call to open_cbz has elasped more than 60 seconds, allow to resume generating
+			if $open_cbz_ltime + 60 < Time.now
+				mk_thumb( obj.fullpath, true )
+			else
+				puts "Thumbnail generating paused."
+				sleep 60
+			end
+		end
+		puts "************* Finish Generating Thumbnails *************"
+	}
+end

data/public/css/browse.css ADDED

@@ -0,0 +1,390 @@
+body {
+	/*background-color: #eee !important;*/
+}
+.hidden {
+	visibility: hidden;
+}
+#navtop {
+	/*position: fixed;*/
+	z-index: 999;
+}
+#navcollapse {
+	z-index: 100;
+	background-color: #fafafa;
+}
+#container2 {
+	z-index: 1;
+	top: 51px;
+	left: 0px;
+	position: absolute;
+	width: 100%;
+	padding: 0px;
+	margin: 0px;
+}
+#ul-lists {
+	left: 0px;
+	position: absolute;
+	width: 100%;
+	margin: 0px;
+	padding: 0px;
+}
+.lazy img {
+	display: block;
+}
+li {
+	position: relative;
+}
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) {
+/*@media all and (min-width: 801px) {*/
+	.directory, .file {
+		width: 160px;
+		height: 220px;
+	}
+	.directory a, .file a {
+		min-width: 100%;
+		min-height: 220px;
+	}
+	.directory span, .file a span:first-of-type {
+		position: absolute;
+		margin-left: auto;
+		margin-right: auto;
+		bottom: 5px;
+		font-size: smaller;
+		height: 52px;
+		width: 95%;
+		padding: 5px;
+		overflow: hidden;
+		display: block;
+		color: #000;
+	}
+	.directory img, .file img {
+		min-height: 100px;
+		min-width: 50px;
+		max-width: 140px;
+		max-height: 140px;
+		position: relative;
+		top: 5px;
+		margin-left: auto;
+		margin-right: auto;
+		display: block;
+		border-style: solid;
+		border-width: 1px;
+		border-color: #000;
+		box-shadow: 0px 0px 5px #999;
+		transition: max-width 0.2s ease, max-height 0.2s ease;
+	}
+	.bookpages {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+	}
+	.file .countdown p {
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		font-size: 14em;
+		line-height: 1em;
+		text-align: center;
+		color: black;
+	}
+}
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+	#navtop2 {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+	#searchbox2 {
+		width: 93%;
+	}
+	.directory, .file {
+		min-width: 24.9%;
+		height: 220px;
+	}
+	.directory a, .file a {
+		min-width: 100%;
+		height: 220px;
+	}
+	.directory span, .file a span:first-of-type {
+		position: absolute;
+		margin-left: auto;
+		margin-right: auto;
+		bottom: 5px;
+		font-size: smaller;
+		height: 52px;
+		width: 95%;
+		padding: 5px;
+		overflow: hidden;
+		display: block;
+		color: #000;
+	}
+	.directory img, .file img {
+		min-height: 100px;
+		min-width: 50px;
+		max-width: 140px;
+		max-height: 140px;
+		position: relative;
+		top: 5px;
+		/* too small, just let image move itself */
+		/*margin-left: auto;*/
+		/*margin-right: auto;*/
+		display: block;
+		border-style: solid;
+		border-width: 1px;
+		border-color: #000;
+		box-shadow: 0px 0px 5px #999;
+		transition: max-width 0.2s ease, max-height 0.2s ease;
+	}
+	.bookpages {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+	}
+	.file .countdown p {
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		font-size: 14em;
+		line-height: 1em;
+		text-align: center;
+		color: black;
+	}
+}
+/* Landscape phones and down */
+@media (max-width: 480px) {
+	#navtop2 {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+	#searchbox2 {
+		width: 93%;
+	}
+	.directory, .file {
+		min-width: 100%;
+		height: 60px;
+	}
+	.directory a, .file a {
+		min-width: 100%;
+		height: 60px;
+	}
+	.directory span, .file a span:first-of-type {
+		position: absolute;
+		top: 0px;
+		font-size: smaller;
+		width: 85%;
+		height: 55px;
+		left: 50px;
+		overflow: hidden;
+		display: block;
+		color: #000;
+		/* covers up the .last-selected-item bg-color, so disabled */
+		/*background-color: #eee;*/
+	}
+	.directory img, .file img {
+		min-height: 10px;
+		min-width: 10px;
+		max-width: 50px;
+		max-height: 50px;
+		position: relative;
+		border-style: solid;
+		border-width: 1px;
+		border-color: #000;
+		transition: max-width 0.2s ease, max-height 0.2s ease;
+	}
+	.bookpages {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+	}
+	.file .countdown p {
+		position: absolute;
+		right: 50px;
+		bottom: 0px;
+		font-size: 3em;
+		line-height: 1em;
+		text-align: center;
+		color: black;
+	}
+}
+.last-selected-item {
+	/* make the last selected browse item dark lighted */
+	background-color: #cdcdcd !important;
+}
+.directory, .file {
+	float: left;
+	/*width: 160px;*/
+	/*height: 220px;*/
+	/*margin: 10px;*/
+	margin: 0px;
+	padding: 0px;
+	list-style: none;
+	/*background-color: #ccc;*/
+}
+.directory a, .file a {
+	/*width: 160px;*/
+	/*height: 220px;*/
+	display: inline-block;
+	position: relative;
+	background-color: #eee;
+}
+.directory img {
+	border: none !important;
+	box-shadow: none !important;
+}
+.file .countdown {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	width: 80%;
+	height: 80%;
+	opacity: 0.3;
+	z-index: 10;
+}
+.file .countdown:hover {
+	text-decoration: none;
+};
+/*
+ * Read Progress Indicator
+ * generated from http://www.colorzilla.com/gradient-editor/
+ */
+.read0 {
+	/*background-color: #ffece6;*/
+}
+.read5 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 5%, rgba(234,234,234,1) 6%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(5%,rgba(51,204,102,1)), color-stop(6%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read10 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 10%, rgba(234,234,234,1) 11%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(51,204,102,1)), color-stop(11%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read20 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 20%, rgba(234,234,234,1) 21%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(51,204,102,1)), color-stop(21%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read30 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 30%, rgba(234,234,234,1) 31%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(30%,rgba(51,204,102,1)), color-stop(31%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read40 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 40%, rgba(234,234,234,1) 41%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(40%,rgba(51,204,102,1)), color-stop(41%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read50 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 50%, rgba(234,234,234,1) 51%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(50%,rgba(51,204,102,1)), color-stop(51%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read60 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 60%, rgba(234,234,234,1) 61%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(60%,rgba(51,204,102,1)), color-stop(61%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read70 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 70%, rgba(234,234,234,1) 71%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(70%,rgba(51,204,102,1)), color-stop(71%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read80 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 80%, rgba(234,234,234,1) 81%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(80%,rgba(51,204,102,1)), color-stop(81%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read90 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 90%, rgba(234,234,234,1) 91%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(90%,rgba(51,204,102,1)), color-stop(91%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read100 {
+	background-color: #33cc66 !important;
+}
+.breadcrumb2 {
+	line-height: 40px;
+	padding: 0;
+	margin: 0;
+	float: left;
+	/* make background almost transparent, use #fafafa as base and 0.5 for opacity */
+	background-color:rgba(250, 250, 250, 0.5);
+	/*background-color: #fafafa;*/
+}