├── .gitignore
├── LICENSE
├── README.md
├── blackout-test.js
├── blackout.js
├── datetime.php
├── example
    ├── index.html
    ├── kitten1.jpg
    ├── kitten2.jpg
    ├── kitten3.jpg
    └── kitten4.jpg
└── lib
    ├── break-stuff.js
    └── modal-display.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 panxzz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NN-blackout
 2 | Purposefully slows loading of webpages to simulate what the internet would look like without Net Neutrality.
 3 | 
 4 | This script will only become active on the day of the blackout (if and when it's scheduled) and on that day it will make webpages look like they are loading really slowly and possibly "break" other things; then after a few seconds a modal will pop saying "This is what the internet would look like without net neutrality... Tell the FCC that you support net neutrality". Clicking anywhere on the screen when the modal is shown will close the message and allow normal operation of the site.
 5 | 
 6 | The idea is that a ton of individual website owners would be able to just pop this script on their site to "opt-in" to a massive blackout of the web on a specific day. If they ever wanted to "opt-out" (say after we've won the internet back, or if they are concerned that it would go down on important days) they would just need to remove the call to this script.
 7 | 
 8 | To see a live demo of the script in action visit http://novanetllc.org/example/
 9 | 
10 | <h3>Ideas for "breaking websites":</h3>
11 | <ul>
12 | <li>slow loading of all assets</li>
13 | <li>reduce image resolutions?</li>
14 | <li>break other parts??</li>
15 | </ul>
16 | 
17 | https://www.reddit.com/r/technology/comments/6bytpx/sopa_pipa_cispa_acta_tpp_itu_cispa_again_tafta_we/dhqybzv/
18 | 
19 | <h3>Installation</h3>
20 | 
21 | Simply copy/paste this script into any page(s) of your website to "opt-in"
22 | <pre><script src="https://rawgit.com/panxzz/NN-blackout/master/blackout.js"></script></pre>
23 | By leaving this script on your site you are already covered, your site will "break" then display the modal message on the specified blackout date.
24 | 
25 | To test what your site will look like you can use this script:
26 | <pre><script src="https://rawgit.com/panxzz/NN-blackout/master/blackout-test.js"></script></pre>
27 | This script will not check for the blackout and act like the blackout is always active.


--------------------------------------------------------------------------------
/blackout-test.js:
--------------------------------------------------------------------------------
 1 | function include(filename, onload) {        //thanks http://stackoverflow.com/a/8139909/7314005
 2 |     var head = document.getElementsByTagName('head')[0];
 3 |     var script = document.createElement('script');
 4 |     script.src = filename;
 5 |     script.type = 'text/javascript';
 6 |     script.onload = script.onreadystatechange = function() {
 7 |         if (script.readyState) {
 8 |             if (script.readyState === 'complete' || script.readyState === 'loaded') {
 9 |                 script.onreadystatechange = null;                                                  
10 |                 onload();
11 |             }
12 |         } 
13 |         else {
14 |             onload();          
15 |         }
16 |     };
17 |     head.appendChild(script);
18 | }
19 | 
20 | function typeOf (obj) {     //thanks http://stackoverflow.com/a/28475765/7314005
21 |   return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
22 | }
23 | 
24 | // PRODUCTION PATHS
25 | var breakStuffPath = "https://rawgit.com/panxzz/NN-blackout/master/lib/break-stuff.js";
26 | var displayModalPath = "https://rawgit.com/panxzz/NN-blackout/master/lib/modal-display.js";
27 | // DEVELOPMENT PATHS
28 | breakStuffPath = "/lib/break-stuff.js";
29 | displayModalPath = "/lib/modal-display.js";
30 | 
31 | include("https://code.jquery.com/jquery-3.2.1.min.js", function(){
32 |     $(document).ready(function() {
33 |         //check the date/time to see if the blackout is currently going on
34 |         $.getScript("http://novanetllc.org/datetime.php", function(data, textStatus, jqxhr){
35 |             if(jqxhr.status == 200 && textStatus == "success")
36 |             {
37 |                 //current blackout set to 2017-05-19 (month is zero based)
38 |                 var serverTime = new Date(parseInt(data));
39 |                 //if it is blackout time then "break" the page
40 |                 if(true)
41 |                 {
42 |                     $.getScript(breakStuffPath, function(data, textStatus, jqxhr){
43 |                         if(jqxhr.status == 200 && textStatus == "success")
44 |                         {
45 |                             breakStuff();
46 |                         }
47 |                         //after 10 seconds or any click on the page pop the modal
48 |                         window.setTimeout(popModal, 10000); 
49 |                     });
50 |                 }
51 |                 else
52 |                 {
53 |                     //console.log("don't blackout!");
54 |                 }
55 |             }
56 | 
57 |             var popModal = function(){
58 |                 $.getScript(displayModalPath, function(data, textStatus, jqxhr){
59 |                     if(jqxhr.status == 200 && textStatus == "success")
60 |                     {
61 |                         displayMessage(); //function from modal-display.js that displays a popup with the NN message
62 |                     }
63 |                 });
64 |             }
65 |         });
66 |     });
67 | });
68 | 
69 | 


--------------------------------------------------------------------------------
/blackout.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function include(filename, onload) {        //thanks http://stackoverflow.com/a/8139909/7314005
 3 |     var head = document.getElementsByTagName('head')[0];
 4 |     var script = document.createElement('script');
 5 |     script.src = filename;
 6 |     script.type = 'text/javascript';
 7 |     script.onload = script.onreadystatechange = function() {
 8 |         if (script.readyState) {
 9 |             if (script.readyState === 'complete' || script.readyState === 'loaded') {
10 |                 script.onreadystatechange = null;                                                  
11 |                 onload();
12 |             }
13 |         } 
14 |         else {
15 |             onload();          
16 |         }
17 |     };
18 |     head.appendChild(script);
19 | }
20 | 
21 | function typeOf (obj) {     //thanks http://stackoverflow.com/a/28475765/7314005
22 |   return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
23 | }
24 | 
25 | // PRODUCTION PATHS
26 | var breakStuffPath = "https://rawgit.com/panxzz/NN-blackout/master/lib/break-stuff.js";
27 | var displayModalPath = "https://rawgit.com/panxzz/NN-blackout/master/lib/modal-display.js";
28 | // DEVELOPMENT PATHS
29 | //breakStuffPath = "/lib/break-stuff.js";
30 | //displayModalPath = "/lib/modal-display.js";
31 | 
32 | include("https://code.jquery.com/jquery-3.2.1.min.js", function(){
33 |     $(document).ready(function() {
34 |         //check the date/time to see if the blackout is currently going on
35 |         $.getScript("http://novanetllc.org/datetime.php", function(data, textStatus, jqxhr){
36 |             if(jqxhr.status == 200 && textStatus == "success")
37 |             {
38 |                 //current blackout set to 2017-07-12 (month is zero based)
39 |                 var serverTime = new Date(parseInt(data));
40 |                 //if it is blackout time then "break" the page
41 |                 if(serverTime.getFullYear() == 2017 && serverTime.getMonth() == 6 && serverTime.getDate() == 12)
42 |                 {
43 |                     $.getScript(breakStuffPath, function(data, textStatus, jqxhr){
44 |                         if(jqxhr.status == 200 && textStatus == "success")
45 |                         {
46 |                             breakStuff();
47 |                         }
48 |                         //after 10 seconds or any click on the page pop the modal
49 |                         window.setTimeout(popModal, 10000); 
50 |                     });
51 |                 }
52 |                 else
53 |                 {
54 |                     //console.log("don't blackout!");
55 |                 }
56 |             }
57 | 
58 |             var popModal = function(){
59 |                 $.getScript(displayModalPath, function(data, textStatus, jqxhr){
60 |                     if(jqxhr.status == 200 && textStatus == "success")
61 |                     {
62 |                         displayMessage(); //function from modal-display.js that displays a popup with the NN message
63 |                     }
64 |                 });
65 |             }
66 |         });
67 |     });
68 | });
69 | 
70 | 


--------------------------------------------------------------------------------
/datetime.php:
--------------------------------------------------------------------------------
1 | <?php
2 | echo time().'000';
3 | ?>


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <title>Hello kittens!</title>
 7 |         <!--<script src="https://rawgit.com/panxzz/NN-blackout/master/blackout-test.js"></script>-->
 8 |         <script src="../blackout-test.js"></script>
 9 |     </head>
10 |     <body>
11 |         <center>
12 |             <h1>Hello kit kits</h1>
13 |             <img src="kitten1.jpg" width="300px" alt="this kit kit" />
14 |             <img src="kitten4.jpg" width="300px" alt="another kit kit" />
15 |             <img src="kitten3.jpg" width="300px" alt="three kit kits?!" />
16 |             <p>This kit kit has a house where he makes monthly mortgage payments</p>
17 | 
18 |             These are kit kits also:
19 |             <ul style="background-color:#985112">
20 |                 <li>Breakfast <img width="25%" style="border:1px solid #000" src="kitten2.jpg" /></li>
21 |                 <li>Lunch <img style="border:5px solid #000" width="100px" src="kitten3.jpg" /></li>
22 |             </ul>
23 |             wait... no... those weren't kit kits
24 |         </center>
25 | 
26 |         <a href="kitkitcity.com"><img src="kitten1.jpg" width="150px" alt="link to kit kit city" /></a>
27 | 
28 |         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique ante sit amet quam malesuada gravida. Vestibulum eu commodo lorem. Sed luctus congue est, sed ornare risus rutrum at. Quisque condimentum eleifend tempor. Pellentesque vel ipsum non nisi fermentum condimentum ac sit amet arcu. In eget lectus quis lacus porta blandit ut sit amet purus. In tristique nunc felis, sit amet ultrices turpis varius nec. Duis nec est dapibus, vestibulum lorem vel, dignissim leo. Curabitur cursus euismod turpis vel mollis. Donec nunc metus, pellentesque vel tortor sit amet, aliquam tristique sapien. Cras est quam, tempus et tincidunt non, accumsan id leo. Maecenas maximus porttitor purus, eget accumsan erat bibendum sed. Maecenas faucibus justo a sem mollis vehicula. Ut rutrum sapien eget fringilla accumsan.</p>
29 | 
30 |         <p>Duis at nibh suscipit, mattis arcu a, consequat quam. In scelerisque ac nibh quis efficitur. Sed eget imperdiet arcu, et luctus dui. Morbi eu nisi pellentesque, iaculis velit vitae, congue sem. Fusce ullamcorper eget erat a iaculis. Sed sit amet feugiat purus. Vestibulum auctor molestie leo, in placerat felis varius non. Pellentesque molestie convallis turpis, non ornare dolor posuere vitae. Quisque ac nunc mattis augue pellentesque rhoncus.</p>
31 | 
32 |         <p>Nam orci enim, mattis vitae consectetur id, venenatis vitae mi. Nullam facilisis justo vel ligula malesuada, quis tempus ligula accumsan. Quisque condimentum magna ut ante viverra molestie. Integer id consectetur mi, in dignissim ligula. Integer vehicula feugiat viverra. Sed ultrices ligula id faucibus tempor. Nunc et vestibulum urna. Pellentesque venenatis risus sed ligula vulputate, eu egestas diam fermentum. Aliquam risus tortor, pharetra eu tincidunt at, hendrerit ut sapien. Donec euismod sagittis purus eget pharetra. Fusce nec finibus est.</p>
33 | 
34 |         <p>Quisque lorem leo, mattis a mollis facilisis, hendrerit a nibh. Aliquam sit amet blandit purus. Aliquam erat volutpat. Fusce enim libero, placerat quis justo nec, blandit venenatis metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis leo, cursus bibendum tincidunt eu, blandit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sagittis diam ac urna mattis, rhoncus congue tortor pellentesque. Nullam sit amet urna elit. Sed at neque sit amet nibh lobortis placerat nec a metus.</p>
35 | 
36 |         <p>Donec laoreet justo et sapien malesuada, ut suscipit felis porta. Nullam non rutrum nisi, nec eleifend neque. Aliquam venenatis mi non dolor finibus, ac tincidunt ligula semper. Donec sem metus, ultrices eget metus nec, interdum consequat tortor. Nam elementum pharetra ligula, a venenatis justo commodo at. Morbi a ligula iaculis, elementum mi ac, vestibulum nibh. Donec nec consequat lacus. Donec elementum pharetra posuere. Nulla laoreet lacinia mauris, at dictum elit elementum vitae.</p>
37 | 
38 |         <img src="kitten4.jpg" />
39 |         Bye!
40 |     </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/example/kitten1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/panxzz/NN-blackout/7585e9cea862f7fa8c774ccf2242bdb462675635/example/kitten1.jpg


--------------------------------------------------------------------------------
/example/kitten2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/panxzz/NN-blackout/7585e9cea862f7fa8c774ccf2242bdb462675635/example/kitten2.jpg


--------------------------------------------------------------------------------
/example/kitten3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/panxzz/NN-blackout/7585e9cea862f7fa8c774ccf2242bdb462675635/example/kitten3.jpg


--------------------------------------------------------------------------------
/example/kitten4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/panxzz/NN-blackout/7585e9cea862f7fa8c774ccf2242bdb462675635/example/kitten4.jpg


--------------------------------------------------------------------------------
/lib/break-stuff.js:
--------------------------------------------------------------------------------
 1 | var loadStepCount = 0;
 2 | var maxLoadSteps = 20;
 3 | var stepDelay = 500;
 4 | 
 5 | function breakStuff() {
 6 |     $("img").each(function(){
 7 |         var imgLeft = $(this).position().left;
 8 |         var imgTop = $(this).position().top;
 9 |         var imgWidth = $(this).width();
10 |         var imgHeight = $(this).height();
11 | 
12 |         var leftBorder = $(this).css('borderLeftWidth');
13 |         leftBorder = leftBorder.substr(0, leftBorder.length - 2);
14 |         var rightBorder = $(this).css('borderRightWidth');
15 |         rightBorder = rightBorder.substr(0, rightBorder.length - 2);
16 |         var topBorder = $(this).css('borderTopWidth');
17 |         topBorder = topBorder.substr(0, topBorder.length - 2);
18 |         var bottomBorder = $(this).css('borderBottomWidth');
19 |         bottomBorder = bottomBorder.substr(0, bottomBorder.length - 2);
20 | 
21 |         imgWidth += (parseInt(leftBorder) + parseInt(rightBorder));
22 |         imgHeight += (parseInt(topBorder) + parseInt(bottomBorder));
23 | 
24 |         //var bgColor = $(this).css('backgroundColor');
25 |         //console.log(bgColor);
26 |         
27 |         var boxString = createBox(imgLeft, imgTop, imgWidth, imgHeight);
28 |         $(document.body).append(boxString);
29 |     });
30 | 
31 |     setTimeout(loadStep, stepDelay);
32 | }
33 | 
34 | function loadStep() {
35 |     loadStepCount++;
36 | 
37 |     $(".white-box").each(function() {
38 |         var currentHeight = $(this).height();
39 |         var stepHeight = Math.max(currentHeight / 5, 10);
40 |         $(this).height(currentHeight - stepHeight);
41 |         
42 |         var currentTop = $(this).position().top;
43 |         //$(this).top(currentTop + stepHeight);
44 |         //var stepTop = $(this).position().top;// - stepHeight;
45 |         $(this).offset({top: currentTop + stepHeight});
46 |     });
47 | 
48 |     if(loadStepCount < maxLoadSteps)
49 |         setTimeout(loadStep, stepDelay);
50 | }
51 | 
52 | function createBox(x, y, w, h) {
53 |     return '<div class="white-box" style="background-color: #fff; position: absolute; top: ' + y + '; left: ' + x + '; width: ' + w + 'px; height: ' + h + 'px;"></div>';
54 | }


--------------------------------------------------------------------------------
/lib/modal-display.js:
--------------------------------------------------------------------------------
 1 | function displayMessage() {
 2 | 	$(document.body).append("<div id='black-background' style='background:rgba(0, 0, 0, 0.6); position: fixed; top:0; left:0; width: 100%; height: 100%;'></div>");
 3 | 	$(document.body).append("<div id='net-message' style='font-family: Arial, sans serif; text-align:center; padding:20px; width:80%; background:#eee; position:fixed; left:10%; top:25%; border-radius:5px; border:5px solid black;'></div>")
 4 | 	$("#net-message").append("<h1 style='margin-top:5px;'>This is the internet <strong>without</strong> Net Neutrality!</h1>");
 5 | 	$("#net-message").append("<h4>Without Net Neutrality, Internet Service Providers (ISPs) like Comcast and AT&T will be able to control exactly how you access the internet, which includes slowing or blocking your connection to websites they don't like.</h4>");
 6 | 	$("#net-message").append("<p>Can you imagine if you wanted to switch from Comcast to one of their competitors, but you were unable to look into alternatives from your home network? This is a real possibility if Net Neutrality didn't exist because Comcast would have control over what you can browse on the internet.</p>");
 7 | 	$("#net-message").append("<h2>What happens without Net Neutrality?</h2>");
 8 | 	$("#net-message").append("<ul>");
 9 | 	$("#net-message").append("<li style='padding:5px 50px 5px 50px;'>Comcast wants us to watch their own video content... They would have the ability to break or cripple Netflix forcing us to use Comcast's offerings.</li>");
10 | 	$("#net-message").append("<li style='padding:5px 50px 5px 50px;'>If you use Facebook or Instagram you would have to purchase the 'Social Bundle' for $15 extra per month. To use Netflix and Hulu you need to pay $20 for the 'Entertainment Bundle'.</li>");
11 | 	$("#net-message").append("<li style='padding:5px 50px 5px 50px;'>Entrepreneurs with new ideas would be stifled by the extreme costs of purchasing a 'Fast Lane' or else be inaccessible due to throttled speeds.</li>");
12 | 	$("#net-message").append("</ul>");
13 | 	$("#net-message").append("<p><h4>In August there will be a vote to remove Net Neutrality and we need you to join our efforts to protect it!</h4></p>");
14 | 	$("#net-message").append("<h1><a style='text-decoration: none;' href='https://dearfcc.org/' target='_blank'>Tell the FCC you support Net Neutrality!</a></h1>");
15 | 	$("net-message").append("<p>Click anywhere outside of this popup to close</p>");
16 | 	//$("#net-message").append("<h1><a style='text-decoration: none;' href='http://www.house.gov/representatives/find/' target='_blank'>Tell your representative you support Net Neutrality!</a></h1>");
17 | 
18 | 	$(document.body).click(function(){
19 | 		$('#net-message').remove();
20 | 		$('#black-background').remove();
21 | 	});
22 | }


--------------------------------------------------------------------------------