New Post: PocketScan

_includes/footer.html

@@ -54,7 +54,7 @@
 
       <div class="footer-col  footer-col-3">
         <p class="text">{{ site.description }}</p>
-        <img class="map map_move_myCapsules" src="http://one.mycapsules.com/main_data/spacer.gif" title="Locations of visitors to this page" id="clustrMapsImg">
+        <a href="http://www2.clustrmaps.com/counter/maps.php?url=http://mycapsules.com"><img class="map map_move_myCapsules" src="http://one.mycapsules.com/main_data/spacer.gif" title="Locations of visitors to this page" id="clustrMapsImg"></a>
       </div>
     </div>
 

_layouts/default.html

@@ -22,6 +22,22 @@
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
         ga('create', 'UA-3189083-1', 'auto');
         ga('send', 'pageview');
+      //<![CDATA[
+        (function() {
+          var shr = document.createElement('script');
+          shr.setAttribute('data-cfasync', 'false');
+          shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
+          shr.type = 'text/javascript'; shr.async = 'true';
+          shr.onload = shr.onreadystatechange = function() {
+            var rs = this.readyState;
+            if (rs && rs != 'complete' && rs != 'loaded') return;
+            var site_id = '7469c0b9536e616429d43fe6f4f7d873';
+            try { Shareaholic.init(site_id); } catch (e) {}
+          };
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(shr, s);
+        })();
+      //]]>
     </script>
     <script src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
   </body>

_layouts/post.html

@@ -28,22 +28,6 @@ layout: default
       dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
       })();
-    //<![CDATA[
-      (function() {
-        var shr = document.createElement('script');
-        shr.setAttribute('data-cfasync', 'false');
-        shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
-        shr.type = 'text/javascript'; shr.async = 'true';
-        shr.onload = shr.onreadystatechange = function() {
-          var rs = this.readyState;
-          if (rs && rs != 'complete' && rs != 'loaded') return;
-          var site_id = '7469c0b9536e616429d43fe6f4f7d873';
-          try { Shareaholic.init(site_id); } catch (e) {}
-        };
-        var s = document.getElementsByTagName('script')[0];
-        s.parentNode.insertBefore(shr, s);
-      })();
-    //]]>
   </script>
 
 </div>

_posts/2015-01-21-iphone-6-plus.md

@@ -6,7 +6,7 @@ categories:
 - review
 tags: Apple
 ---
-<link rel="stylesheet" href="/sites/2015/01/iphone6plus/2020/twentytwenty.css" type="text/css" media="screen" />
+<link rel="stylesheet" href="/sites/2015/01/iphone6plus/twentytwenty.css" type="text/css" media="screen" />
 
 As everyone knew, it was big and lasted long. No argument that it was one of the best iPhone so far and it was one of the best phones you could buy in 2014.
 
@@ -48,4 +48,4 @@ On software side, I was a bit skeptical about how apps would look in on a bigger
 
 Buy one if it didn't break your bank. You would find hard to have any comparable pleasure with other phones.
 
-<script src="/sites/2015/01/iphone6plus/2020/jquery-2.1.3.min.js"></script><script src="/sites/2015/01/iphone6plus/2020/jquery.event.move.js"></script><script src="/sites/2015/01/iphone6plus/2020/jquery.twentytwenty.js"></script><script> $(window).load(function(){ $("#container1").twentytwenty();}); </script>
+<script src="/sites/libs/2020/jquery-2.1.3.min.js"></script><script src="/sites/libs/2020/jquery.event.move.js"></script><script src="/sites/libs/2020/jquery.twentytwenty.js"></script><script> $(window).load(function(){ $("#container1").twentytwenty();}); </script>

_posts/2015-02-02-lg-g3.md

@@ -29,7 +29,7 @@ __Back buttons__ were one thing I was disappointed. They weren't anything bad ab
 
 There was a gimmick for volume down buttons though; LG did assign it for camera app shortcut while screen off. It also acted like a shutter. You needed to remember not to hold it, only press it short to take a photo. Maybe I got used to hold-half to focus before hard-press to get the photo from DSLR. Anyway, shutter at that position was not so comfortable unless you were a stalker pretending to look at your phone while taking photos. (It indeed worked great for that matter; please be careful to turn any sound off lol)
 
-On software side, without front buttons, LG had to find the way to turn the device on w/o reaching back buttons. LG found _knock code sequence_ which was pretty darn nice to have. It was basically your own tapping pattern on screen. It wasn't as smooth log in as Apple Touch ID experience I had to admit since sometimes it didn't recognize the pattern on first try or you found yourself knocking again and again while the phone was upside down. Wake up time was a bit delay. I usually thought that I tapped the pattern wrong and started tapping once more before screen on. Maybe Moto X with a touchless gesture was the only more convenient way to turn on the phone--I wish I had Moto X to prove my assumption but I wasn't in the US no more--that made Moto X quite a rare item.
+On software side, without front buttons, LG had to find the way to turn the device on w/o reaching back buttons. LG found _knock code sequence_ which was pretty darn nice to have. It was basically your own tapping pattern on screen. It wasn't as smooth log in as Apple Touch ID experience I had to admit since sometimes it didn't recognize the pattern on first try or you found yourself knocking again and again while the phone was upside down. Wake up time was a bit delay. I usually thought that I tapped the pattern wrong and started tapping once more before screen on. Eventually I settled for double-tap to wake and had a regular pattern lock for security. Maybe Moto X with a touchless gesture was the only more convenient way to turn on the phone--I wish I had Moto X to prove my assumption but I wasn't in the US no more--that made Moto X quite a rare item.
 
 Surprisingly LG G3 got a chance to taste __Lollipop__ at very early day. That proved LG commitment to the phone quite strongly. Although some could say that LG didn't have as heavy framework as Samsung did with TouchWiz, I didn't not see a thing missing when upgrading from KitKat to Lollipop either and that wasn't little IMHO. Indeed Lollipop on LG G3 wasn't vanilla and in my opinion that was the best thing for every Android manufacturers. I bought LG G3 for LG flavor of Android. If I wanted to have a pure AOSP, I would go to closest ROM like CyanogenMod or just take a Nexus route instead.
 
@@ -63,7 +63,7 @@ Although G3 powered by a huge 3000mAh battery, __battery life__ wasn't up to iPh
 
 With these many goodies packed in the G3, LG did miss something to make it perfect.
 
-* How on earth they could forget to have __Flashlight__ or _Torch_ app. Although you could get an app for that, it should have to. I used [Quick Torch](https://play.google.com/store/apps/details?id=com.yoavst.quicktorch) which was nothing but flashlight. Anyway, this app's widget was unreliable although torch on and off in the app worked as expected.
+* How on earth they could forget to have __Flashlight__ or _Torch_ app. Although you could get an app for that, LG should have had that. I used [Quick Torch](https://play.google.com/store/apps/details?id=com.yoavst.quicktorch) which was nothing but flashlight. Anyway, this app's widget was unreliable although torch on and off in the app or Qslide (LG's own floating app framework) worked as advertised.
 * A magic _Dual window_ was restricted too much. If they could ever let any other apps in there, it might not be as smooth but it was better than nothing at all.
 * LG's ROM came with junk too. McAfee Security, Update Center, SmartWorld, RemoteCall Service, and Voice Mate. Most junks required you to agree to the terms; I just didn't and was happy that it didn't run. As of Voice Mate, it was Siri-like, but I was sure of that everyone preferred Google Now to this hit-or-miss.
 

_posts/kickstartr/2015-02-25-pocketscan.md

@@ -0,0 +1,103 @@
+---
+layout: post
+title:  "PocketScan"
+date:   Feb 25, 2015
+author:
+  display_name: 'sipp11'
+categories: Kickstarter review
+kickstarter:
+  url: http://kck.st/1nJGjbg
+  widget: https://www.kickstarter.com/projects/1776222658/pocketscan/widget/card.html?v=2
+tags: 
+---
+<link rel="stylesheet" href="/sites/2015/02/pocketscan/twentytwenty.css" type="text/css" media="screen" />
+
+PocketScan was like a nifty tool copying any document w/o running to your flattop scanner. While alternatives are using your phone camera to take a photo, then processing via apps like CamScanner and such. For me, I was hoping that PocketScan would give a greater resolution and better contrast. Also it should have solved uneven light on the edge that every photos from camera had. While more expensive alternatives like ScanSnap scanner should be an ideal goal, I could only hope to get a comparable result with Dacuda PocketScan and scanning receipts would not be a boring task anymore.
+
+[![Overall](/sites/2015/02/pocketscan/overall-sm.jpg)](/sites/2015/02/pocketscan/overall.jpg) [![Top](/sites/2015/02/pocketscan/top-led-sm.jpg)](/sites/2015/02/pocketscan/top-led.jpg)
+
+There were 2 LED indicators; the light you saw above and another one on the button.
+
+[![USB](/sites/2015/02/pocketscan/usb-sm.jpg)](/sites/2015/02/pocketscan/usb.jpg) [![Scanning](/sites/2015/02/pocketscan/in-use-sm.jpg)](/sites/2015/02/pocketscan/in-use.jpg)
+
+At very first time, it felt weird scanning esp. on small book. But once you got used to it, it wasn't a bad experience at all.
+
+[![Bottom](/sites/2015/02/pocketscan/bottom-sm.jpg)](/sites/2015/02/pocketscan/bottom.jpg) [![Laser](/sites/2015/02/pocketscan/laser-sm.jpg)](/sites/2015/02/pocketscan/laser.jpg)
+
+Bottom had a laser pointer similar to your mouse and inside the scan window, there were many LEDs and camera for capturing images.
+
+![Flashing LED](/sites/2015/02/pocketscan/scanner_cam.gif)
+
+These LEDs were acting like flash I assumed. That was how PocketScan could have an even light output. It was a light-control environment after all.
+
+#### Delay
+
+The estimated delivery was in Dec 2014, but I got it in the mail in Feb 2015. Delay was negligible IMO.
+
+### Impression
+
+It was well-built and portable. However, iOS app wasn't on App Store as of writing. It wasn't much pain installing the old way, but surely didn't look professional for Dacuda. I had yet to try on Desktop since OSX software didn't release yet. Only on Windows it would work so far.
+
+Good thing was PocketScan workflow was a breeze.
+
+* You turned on the PocketScan by holding power button for a while to see 2 LED blinking (BT pairing mode)
+* Pair it with your phone
+* Open PocketScan app and wait for connection. (5 sec roughly)
+* Press button on PocketScan to start scan (app would start scanning mode automatically)
+* Start scaning
+* Go through all your document
+* Press button again when done.
+* Crop or rotate if needed
+* Done
+
+The whole process should take less than couple minutes if you knew what you were doing. It should take a bit less if you went through a CamScanner route since only a phone was involved. 1 minute and 30 seconds comparing to 2 min & 10 sec when I measured how fast I could turn a receipt to PDF and email. I had CamScanner app as must-have apps in all my devices, so I would compare between this and newly promising PocketScan and see whether it could be an additional to my must-have apps. Let's compare the result between PocketScan iOS app version 1.0.8 (34) and CamScanner iOS version 3.6.1.10761.
+
+<div class="vertical_twenty"><img src="/sites/2015/02/pocketscan/small-piece-1-camscanner.jpg" /><img src="/sites/2015/02/pocketscan/small-piece-1-pocketscan.jpg" /></div>
+
+Scanning a tiny piece of receipt; CamScanner gave us much sharper result, but too much contrast applied which caused text on the back size appeared. PocketScan result could be much better since so far, it was way too soft, but hey both were good enough.
+
+<div class="vertical_twenty"><img src="/sites/2015/02/pocketscan/ninox-1-camscanner.jpg" /><img src="/sites/2015/02/pocketscan/ninox-1-pocketscan.jpg" /></div>
+
+Scanning from the A5-size booklet; results were pretty much the same as above; however, if you looked closely, you would see that the owl perspective weren't the same. Still differences were minor.
+
+<div class="horizontal_twenty"><img src="/sites/2015/02/pocketscan/zeitung-camscanner.jpg" /><img src="/sites/2015/02/pocketscan/zeitung-pocketscan.jpg" /></div>
+
+This was where things were different. Scanning from newspaper; PocketScan result was bad due to its default saturation setting. Unfortunately, there was no way to tweak in the app as of now.
+
+In summary, PocketScan results were too soft and more saturated while CamScanner results were sharp but having weird perspective since its __auto settings__ applied quite a sharpening and surely, overall quality depended on how good your phone camera was. The best thing for CamScanner was you could tweak anything the way you saw fit. That's why having similar options on PocketScan would be huge as well. Working on another app was an option also, but that was too much work. At the end of the day, PocketScan result was a bit worse overall, but those disadvantages could be improved by image processing alone. At least we could see the light at the end of the tunnel, couldn't we?
+
+Text recoginition was another thing both of these apps had. They both were reliable only in English (well, it might be all latin characters, I had no idea.) PocketScan did better with almost 100% accuracy in English while CamScanner couldn't do as good as far as my experience went. Image perspective was likely the blame here since I didn't think OCR engines performed that much different.
+
+__PDF__ outputs on both apps were different. An image on CamScanner would be stretch to fit US letter size PDF page while PocketScan would not stretch to fill the page and try to stay on top center. I didn't know how they calculated image size since the results for couple tries weren't exactly the same although they were pretty close. For me, I prefered to have a PDF file that I could print immediately w/o worrying whether it was the same size as original. Download and see by yourself; the original book size was close to A5.
+
+* [PDF from CamScanner](/sites/2015/02/pocketscan/ninox-2-camscanner.pdf)
+* [Example PDF from PocketScan](/sites/2015/02/pocketscan/ninox-2-pocketscan.pdf)
+
+#### Drawbacks
+
+There were many things PocketScan app on iOS could improve:
+
+* post image processing
+    * sharpening
+    * contrast
+    * saturation
+* merge each scan into multiple pages PDF
+* optimizing PDF output size
+
+
+If Dacuda were able to update their app, it would be awesome or they had to open their SDK and let others improve the overall experience to make PocketScan a household name.
+
+Up to this point, I hadn't complained about the hardware yet and there was none I could think of. _Battery life_ was still unknown, but I didn't have any low battery warning while testing roughly 10 A4 pages either. IMHO, it was a good sign. However, putting a document to scanner feeder then pressing scan on your Mac was still the best option since it was a painless procedure. You didn't have to put effort to get the optimal result at all while some efforts needed for both PocketScan and CamScanner-like.
+
+### Price
+
+I paid $89 including shipping worldwide. Yes, it was affordable enough, but it was another story in [their store](http://shop.dacuda.com/products/pocketscan) after Kickstarter which they asked for $169 (+$16 shipping to Thailand as far as I've tried in their store.)
+
+### Verdict
+
+I had a mixed feeling about this PocketScan; it had a big potential and no real hardware drawback. Most of problems could be solved with software update. However, when it comes to its retail price. Honestly, with $185 price tag, it was expensive enough to compare to presumably better established alternatives. I would go try to find things like Fujitsu ScanSnap which [listed on Amazon](http://www.amazon.com/s/?_encoding=UTF8&camp=1789&creative=390957&field-keywords=scansnap&linkCode=ur2&tag=mycapsules-20&url=search-alias%3Daps&linkId=XGCZOGQLEPKW4DWG) for $260 first. I had no experience whatsoever with ScanSnap, but it looked just like a regular scanner with feeder in a small package which its performance should be as good as all-in-one printer; also I had heard nothing but praises.
+
+
+In short, until Dacuda improved their app into much more robust one, I bet that a couple-dollar (or free) CamScanner app was a preferred choice for anyone. In addition, you would still have $ left after a purchase of an entry level all-in-one printer w/ scan-feeder like [Epson WorkForce WF-3620 WiFi -- $120 on Amazon](http://www.amazon.com/gp/product/B00JXLGF06/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=B00JXLGF06&linkCode=as2&tag=mycapsules-20&linkId=JHMD4AAHOP7TM6IF). These two would make your life easier already. Safer; cheaper alternative I would say.
+
+<script src="/sites/libs/2020/jquery-2.1.3.min.js"></script><script src="/sites/libs/2020/jquery.event.move.js"></script><script src="/sites/libs/2020/jquery.twentytwenty.js"></script><script> $(window).load(function(){ $(".vertical_twenty").twentytwenty({orientation: "vertical"}); $(".horizontal_twenty").twentytwenty();  });  </script>

sites/2015/02/pocketscan/twentytwenty.css

@@ -0,0 +1,205 @@
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  content: " ";
+  display: block;
+  background: white;
+  position: absolute;
+  z-index: 30;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+  width: 3px;
+  height: 9999px;
+  left: 50%;
+  margin-left: -1.5px; }
+
+.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  width: 9999px;
+  height: 3px;
+  top: 50%;
+  margin-top: -1.5px; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  transition-duration: 0.5s; }
+
+.twentytwenty-before-label, .twentytwenty-after-label {
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  transition-property: opacity; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  color: white;
+  font-size: 13px;
+  letter-spacing: 0.1em; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.2);
+  line-height: 38px;
+  padding: 0 20px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+  top: 50%;
+  margin-top: -19px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+  left: 50%;
+  margin-left: -45px;
+  text-align: center;
+  width: 90px; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  width: 0;
+  height: 0;
+  border: 6px inset transparent;
+  position: absolute; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+  top: 50%;
+  margin-top: -6px; }
+
+.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  left: 50%;
+  margin-left: -6px; }
+
+.twentytwenty-container {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none; }
+  .twentytwenty-container img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block; }
+  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
+    background: rgba(0, 0, 0, 0); }
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+      opacity: 0; }
+  .twentytwenty-container * {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box; }
+
+.twentytwenty-before-label {
+  opacity: 0; }
+  .twentytwenty-before-label:before {
+    content: "CamScanner"; }
+
+.twentytwenty-after-label {
+  opacity: 0; }
+  .twentytwenty-after-label:before {
+    content: "PocketScan"; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+  left: 10px; }
+
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+  right: 10px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before {
+  top: 10px; }
+
+.twentytwenty-vertical .twentytwenty-after-label:before {
+  bottom: 10px; }
+
+.twentytwenty-overlay {
+  -webkit-transition-property: background;
+  -moz-transition-property: background;
+  transition-property: background;
+  background: rgba(0, 0, 0, 0);
+  z-index: 25; }
+  .twentytwenty-overlay:hover {
+    background: rgba(0, 0, 0, 0.5); }
+    .twentytwenty-overlay:hover .twentytwenty-after-label {
+      opacity: 1; }
+    .twentytwenty-overlay:hover .twentytwenty-before-label {
+      opacity: 1; }
+
+.twentytwenty-before {
+  z-index: 20; }
+
+.twentytwenty-after {
+  z-index: 10; }
+
+.twentytwenty-handle {
+  height: 38px;
+  width: 38px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  border: 3px solid white;
+  -webkit-border-radius: 1000px;
+  -moz-border-radius: 1000px;
+  border-radius: 1000px;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  z-index: 40;
+  cursor: pointer; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before {
+  bottom: 50%;
+  margin-bottom: 22px;
+  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-horizontal .twentytwenty-handle:after {
+  top: 50%;
+  margin-top: 22px;
+  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:before {
+  left: 50%;
+  margin-left: 22px;
+  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-vertical .twentytwenty-handle:after {
+  right: 50%;
+  margin-right: 22px;
+  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-left-arrow {
+  border-right: 6px solid white;
+  left: 50%;
+  margin-left: -17px; }
+
+.twentytwenty-right-arrow {
+  border-left: 6px solid white;
+  right: 50%;
+  margin-right: -17px; }
+
+.twentytwenty-up-arrow {
+  border-bottom: 6px solid white;
+  top: 50%;
+  margin-top: -17px; }
+
+.twentytwenty-down-arrow {
+  border-top: 6px solid white;
+  bottom: 50%;
+  margin-bottom: -17px; }

sites/libs/2020/twentytwenty.css

@@ -0,0 +1,205 @@
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  content: " ";
+  display: block;
+  background: white;
+  position: absolute;
+  z-index: 30;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+  width: 3px;
+  height: 9999px;
+  left: 50%;
+  margin-left: -1.5px; }
+
+.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  width: 9999px;
+  height: 3px;
+  top: 50%;
+  margin-top: -1.5px; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  transition-duration: 0.5s; }
+
+.twentytwenty-before-label, .twentytwenty-after-label {
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  transition-property: opacity; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  color: white;
+  font-size: 13px;
+  letter-spacing: 0.1em; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.2);
+  line-height: 38px;
+  padding: 0 20px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+  top: 50%;
+  margin-top: -19px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+  left: 50%;
+  margin-left: -45px;
+  text-align: center;
+  width: 90px; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  width: 0;
+  height: 0;
+  border: 6px inset transparent;
+  position: absolute; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+  top: 50%;
+  margin-top: -6px; }
+
+.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  left: 50%;
+  margin-left: -6px; }
+
+.twentytwenty-container {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none; }
+  .twentytwenty-container img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block; }
+  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
+    background: rgba(0, 0, 0, 0); }
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+      opacity: 0; }
+  .twentytwenty-container * {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box; }
+
+.twentytwenty-before-label {
+  opacity: 0; }
+  .twentytwenty-before-label:before {
+    content: "Screen Off"; }
+
+.twentytwenty-after-label {
+  opacity: 0; }
+  .twentytwenty-after-label:before {
+    content: "Screen On"; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+  left: 10px; }
+
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+  right: 10px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before {
+  top: 10px; }
+
+.twentytwenty-vertical .twentytwenty-after-label:before {
+  bottom: 10px; }
+
+.twentytwenty-overlay {
+  -webkit-transition-property: background;
+  -moz-transition-property: background;
+  transition-property: background;
+  background: rgba(0, 0, 0, 0);
+  z-index: 25; }
+  .twentytwenty-overlay:hover {
+    background: rgba(0, 0, 0, 0.5); }
+    .twentytwenty-overlay:hover .twentytwenty-after-label {
+      opacity: 1; }
+    .twentytwenty-overlay:hover .twentytwenty-before-label {
+      opacity: 1; }
+
+.twentytwenty-before {
+  z-index: 20; }
+
+.twentytwenty-after {
+  z-index: 10; }
+
+.twentytwenty-handle {
+  height: 38px;
+  width: 38px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  border: 3px solid white;
+  -webkit-border-radius: 1000px;
+  -moz-border-radius: 1000px;
+  border-radius: 1000px;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  z-index: 40;
+  cursor: pointer; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before {
+  bottom: 50%;
+  margin-bottom: 22px;
+  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-horizontal .twentytwenty-handle:after {
+  top: 50%;
+  margin-top: 22px;
+  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:before {
+  left: 50%;
+  margin-left: 22px;
+  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-vertical .twentytwenty-handle:after {
+  right: 50%;
+  margin-right: 22px;
+  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-left-arrow {
+  border-right: 6px solid white;
+  left: 50%;
+  margin-left: -17px; }
+
+.twentytwenty-right-arrow {
+  border-left: 6px solid white;
+  right: 50%;
+  margin-right: -17px; }
+
+.twentytwenty-up-arrow {
+  border-bottom: 6px solid white;
+  top: 50%;
+  margin-top: -17px; }
+
+.twentytwenty-down-arrow {
+  border-top: 6px solid white;
+  bottom: 50%;
+  margin-bottom: -17px; }