D3 Examples - Checkbox to "criminalizate" torcriminalbrowser.com :)

xxxxxxxxxx
 
<!DOCTYPE html>
​
<html>
<head>
    <title>Tor: The Web Browser for Criminals</title>
    
<meta name="description" content="Tor, the web browser for criminals">
<meta name="author" content="Jordan Rejaud">
<meta name="keywords" content="tor, browser, web browser, privacy, web browser for criminals">
​
​
<link rel="stylesheet" type="text/css" href="https://torcriminalbrowser.com/style/format.css">
​
<link rel="shortcut icon" href="https://torcriminalbrowser.com/favicon.ico">
​
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
​
  ga('create', 'UA-46626593-2', 'auto');
  ga('send', 'pageview');
​
</script>
​
<!-- Begin criminalizer style -->
<style type="text/css">
#criminalizer-wrapper { text-align:center; width:100% }
#criminalizer-wrapper h2 { padding-top:50px; font-weight:bold; font-size:120% }
#criminalized {
        height:350px;
        white-space: nowrap;
        position:relative
}
#criminalizer+label+#criminalized #criminal,
#criminalizer:checked+label+#criminalized #lawful {
        transition: all 4s ease-out;
        position:absolute;
        top:-1000px;
        left:50%;
    opacity: 0;
}
#criminalizer+label+#criminalized #lawful,
#criminalizer:checked+label+#criminalized #criminal {
        transition: all 3s ease-in;
        position:absolute;
        top:8px;
        left:50%;
        text-align:center;
        margin: 0 auto;
    opacity: 1;
}
#criminalizer-wrapper img { vertical-align:middle }
#criminalizer-wrapper .image figcaption,
#criminalizer-wrapper .image span img {
        position:relative;
        left:-50%;
}
/* OT: tweak against empty space below piratebay item */
/* text can overflow beyond 256, without obstructing float-left */
.item { height: 256px }
</style>
<!-- End criminalizer style -->
​
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
​
</head>
​
<body>
    <div id="nav">
    
    <h1 id="logo"><a href="https://www.torproject.org/index.html.en">Tor</a></h1>
    
    <nav>
        <ul>
            <li><a href="https://www.torproject.org/index.html.en">Home</a></li>
            <li><a href="https://www.torproject.org/about/overview.html.en">About Tor</a></li>
            <li><a href="https://www.torproject.org/docs/documentation.html.en">Documentation</a></li>
            <li><a href="https://www.torproject.org/press/press.html.en">Press</a></li>
            <li><a href="https://blog.torproject.org/blog/">Blog</a></li>
            <li><a href="https://www.torproject.org/about/contact.html.en">Contact</a></li>
        </ul>
        
    </nav>
    </div>
​
    <!--Main Margins Block -->
    <div>
        <!-- Begin criminalizer -->
        <div id="criminalizer-wrapper">  
          <input id="criminalizer" type="checkbox">
          <label for="#criminalizer">Criminal mode</label>
          <div id="criminalized">
            <h2><img src="ajax-loader.gif"> [de]criminalizating...</h2>
            <!-- Lawful Image-->
            <figure id="lawful" class="image">
              <span onclick="document.getElementById('criminalizer').click()">
                <img src="tor-header.jpg" alt="Mark of criminal quality"> 
              </span>
              <figcaption>The Web Browser for Criminals</figcaption>
            </figure>
            <!-- Criminal Image-->
            <figure id="criminal" class="image">
              <span onclick="document.getElementById('criminalizer').click()">
                <img src="criminal-header.jpg" alt="You're a criminal. Enjoy"> 
              </span>
              <figcaption>Criminal mode engaged</figcaption>
            </figure>
          </div>
        </div>
        <!-- End criminalizer -->
        <hr>
            <div class="itemcontainer">
            
            <!-- Row 3 -->
            <div class="item">
                <h2>iCloud Hacking</h2>
                <img src="https://logonoid.com/images/icloud-logo.png"/>
                <p>Tor lets you hack iCloud to bend someone's iPhone 6 using remote microwave radiation</p>
            </div>
            
            <div class="item">
                <h2>Arson</h2>
                <img src="https://torcriminalbrowser.com/images/pyro.png"/>
                <p>Tor can break through your victim's firewall to light their computer on fire</p>
            </div>
            
            
            <div class="item">
                <h2>Free Pedobear Doll</h2>
                <img src="https://torcriminalbrowser.com/images/pedobear.jpg"/>
                <p>Anyone who uses Tor gets a free Pedobear doll! Use it to gain a child's trust! Its nose is a webcam!</p>
            </div>
            
            <!-- Row 1 -->
            <div class="item">
                <h2>Pirate Bay Search Engine</h2>
                <img src="https://entertainmentagentblog.com/wp-content/uploads/2009/06/piratbyran.gif"/>
                <p>The Pirate Bay is the default search engine in Tor. Why bother with Google? Cut out the middle man</p>
            </div>
            
                
            <div class="item">
                <h2>Hacker 4chan</h2>
                <img src="https://img2.wikia.nocookie.net/__cb20111102014122/suicideprevention/images/0/01/4chan-logo.jpg"/>
                <p>Tor is the official browser of infamous hacker, 4chan</p>
            </div>
            
            <div class="item">
                <h2>Aero-Narcotics</h2>
                <img src="https://torcriminalbrowser.com/images/flyingcamel.png"/>
                <p>Tor will use drones in Washington and Colorado to remotely fly illicit drugs to your home</p>
            </div>
            
            <!-- Row 2 -->
            <div class="item">
                <h2>Bitcoin Integration</h2>
                <img src="https://bitcoin.org/img/opengraph.png"/>
                <p>Euro, USD, and all other fiat currency values are automatically converted and shown as Bitcoin (the currency for criminals) when using Tor</p>
            </div>
            
            <div class="item">
                <h2>Automobile download</h2>
                <img src="downloadcar.png"/>
                <p>The latest version of Tor finally lets you download a car. Only electric cars can be downloaded (because electricity = internet).</p>
            </div>
            
            
            <div class="item">
                <h2>NSA Proof</h2>
                <img src="https://bloximages.chicago2.vip.townnews.com/host.madison.com/content/tncms/assets/v3/editorial/1/de/1ded273c-e892-11e2-af6c-001a4bcf887a/51dc0072f346e.preview-620.jpg"/>
                <p>Tor browser is completely NSA proof. You can conduct your illegal and blatantly non-ethical activities with no oversight from Big Brother.</p>
            </div>
​
            <div class="clear"></div>
            <hr>
                <div class="clear"></div>
                
            <div class="item">
                <h2>Requirements</h2>
                <img src="https://torcriminalbrowser.com/images/comcast.png"/>
                <p>Tor is optimized for modern ISPs (like Google Fiber) and is incompatible with Comcast</p>
            </div>
            
            <div class="item">
                <h2>Who uses Tor?</h2>
                <img src="https://upload.wikimedia.org/wikipedia/en/c/c6/SPECTRE_Logo.png"/>
                <p><del>People who are concerned about their privacy</del><br>Murderers, Terrorists, the Cobra Commander, Sauron, and Criminals</p>
            </div>
            
            <div class="item">
                <h2>Why use Tor?</h2>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Tor-logo-2011-flat.svg/1280px-Tor-logo-2011-flat.svg.png"/>
                <p><del>*cough* NSA *cough* </del><br>Because you are a scoundrel, a knave, and you have criminal activities to hide. Why else would you want anonymity ?</p>
            </div>
​
    
    <div class="clear"></div>
    <hr>
        
    <div class="itemcontainer">
         <div class="item">
            
            <div class="g-plusone"></div>
              <a href="https://twitter.com/share" class="twitter-share-button" data-via="JordanRejaud">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        
         </div>
         
         <div class="item">                
            <p> An obvious (I hope) satire by <br><a href="https://www.jordanrejaud.com/">Jordan Rejaud</a></p>
        </div>
         
         <div class="item">                
                   <a href="https://twitter.com/JordanRejaud" class="twitter-follow-button" data-show-count="false">Follow @JordanRejaud</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        
        
        </div>
   
    </div>
​
    
    </div>
    </div>
​
<script src="https://apis.google.com/js/platform.js" async defer></script>
​
</body>
</html>
​
    