1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[GET] SOPA/PIPA Blackout Page Template

Discussion in 'BlackHat Lounge' started by MrBlue, Jan 17, 2012.

  1. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    950
    Likes Received:
    662
    Occupation:
    Web/Bot Developer
    Here is a SOPA/PIPA blackout page template by Zachary Johnson.
    I've added the necessary 503 header for search engines.
    Just copy/paste the code below into a file and save as your temporary index.php

    View demo:
    Code:
    http://www.zachstronaut.com/lab/text-shadow-box/stop-sopa.html
    Code:
    <?php
    
    /* Tell search engines that the site is temporarily unavailable */
    
    $protocol = $_SERVER["SERVER_PROTOCOL"];
    if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol ) $protocol = 'HTTP/1.0';
    header( "$protocol 503 Service Unavailable", true, 503 );
    header( 'Content-Type: text/html; charset=utf-8' );
    
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>STOP SOPA!</title>
    
    <style type="text/css" media="all">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    
    #text-shadow-box {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #444;
        font-family: Helvetica, Arial, sans-serif;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-user-select: none;
    }
    
    #text-shadow-box #tsb-text,
    #text-shadow-box #tsb-link {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 1em;
        margin: -0.77em 0 0 0;
        font-size: 90px;
        line-height: 1em;
        font-weight: bold;
        text-align: center;
    }
    
    #text-shadow-box #tsb-text {
        font-size: 100px;
        color: transparent;
        text-shadow: black 0px -45.2px 19px; 
    }
    
    #text-shadow-box #tsb-link a {
        color: #999;
        text-decoration: none;
    }
    
    #text-shadow-box #tsb-box,
    #text-shadow-box #tsb-wall {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 60%;
    }
    
    #text-shadow-box #tsb-box {
        -webkit-box-shadow: black 0px -45.2px 39px;
        -moz-box-shadow: black 0px -45.2px 39px;
    }
    
    #text-shadow-box #tsb-wall {
        background: #999;
    }
    
    #text-shadow-box #tsb-wall p {
        position: relative;
        font-size: 18px;
        line-height: 1.5em;
        text-align: justify;
        color: #222;
        width: 550px;
        margin: 1.5em auto;
        cursor: default;
    }
    
    #text-shadow-box #tsb-wall p a {
        color: #fff;
    }
    
    #text-shadow-box #tsb-wall p a:hover {
        text-decoration: none;
        color: #000;
        background: #fff;
    }
    
    #tsb-spot {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        pointer-events: none;
        background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
        background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
    }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    /* Sadly no IE9 support for pointer-events: none; nor CSS2 text-shadow */
    #tsb-spot {
        display: none;
    }
    #tsb-ie {
        position: absolute;
        top: -90%;
        left: -50%;
        width: 200%;
        height: 334%;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    }
    </style>
    <![endif]-->
    
    </head><body>
        
    <div id="text-shadow-box">
        <div style="-moz-box-shadow: 0pt 88.4px 59px black;" id="tsb-box"></div>
        <p style="text-shadow: 112.8px 88.4px 39px black;" id="tsb-text">STOP SOPA!</p>
        <p id="tsb-link"><a href="http://americancensorship.org/">STOP SOPA!</a></p>
        <div id="tsb-wall">
            <div id="tsb-ie"></div>
            
            <p>This site has gone dark today in protest of the U.S. Stop 
    Online Piracy Act (SOPA) and PROTECT-IP Act (PIPA).  The U.S. Congress 
    is about to censor the Internet, even though the vast majority of 
    Americans are opposed. We need to kill these bills to protect our rights
     to free speech, privacy, and prosperity.  Learn more at <a href="http://americancensorship.org/">AmericanCensorship.org</a></p>
        </div>
        <div style="background-position: -282px -336px;" id="tsb-spot"></div>
    </div>
    
    <script type="text/javascript" language="javascript" charset="utf-8">
    /**
     * Zachary Johnson
     * http://www.zachstronaut.com
     * I place the following code in the public domain.
     *
     * Fork it on GitHub: https://github.com/zachstronaut/stop-sopa
     */
     
    var text = null;
    var spot = null;
    var box = null;
    var boxProperty = '';
    
    init();
    
    function init() {
        text = document.getElementById('tsb-text');
        spot = document.getElementById('tsb-spot');
        box = document.getElementById('tsb-box');
        
        if (typeof box.style.webkitBoxShadow == 'string') {
            boxProperty = 'webkitBoxShadow';
        } else if (typeof box.style.MozBoxShadow == 'string') {
            boxProperty = 'MozBoxShadow';
        } else if (typeof box.style.boxShadow == 'string') {
            boxProperty = 'boxShadow';
        }
    
        if (text && spot && box) {
            document.getElementById('text-shadow-box').onmousemove = onMouseMove;
            document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
        }
    }
    
    function onMouseMove(e) {
        if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
            return;
        }
        
        var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
        var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
        var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
        text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
        
        if (boxProperty) {
            box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
        }
        
        xm = e.clientX - Math.floor(window.innerWidth / 2);
        ym = e.clientY - Math.floor(window.innerHeight / 2);
        spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
    }
    </script>
    
    </body></html>
    
    
     
    • Thanks Thanks x 14
  2. kc1oo1

    kc1oo1 Junior Member

    Joined:
    Dec 17, 2011
    Messages:
    147
    Likes Received:
    21
    Location:
    louisville, ky
    nice, good work
     
  3. coachw1

    coachw1 Regular Member

    Joined:
    Jan 3, 2009
    Messages:
    246
    Likes Received:
    77
    Occupation:
    SEO, PPC Manager, Social Media Manager
    Location:
    Chicago
    very cool.
     
  4. mcc777

    mcc777 Registered Member

    Joined:
    Jul 16, 2011
    Messages:
    51
    Likes Received:
    27
    Location:
    Ohio
    Home Page:
    count me in! Perhaps this is one of the most important posts ever made on BHW.

    One thing is for sure, if BHW members and admins alike don't support the stopping of this legislation, there is no doubt BHW will become a victim of it.
     
  5. transam7410

    transam7410 Power Member

    Joined:
    Apr 22, 2008
    Messages:
    522
    Likes Received:
    266
    Occupation:
    Money!
    Location:
    Amarillo, Tx
    thats a sick template bro
     
  6. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    950
    Likes Received:
    662
    Occupation:
    Web/Bot Developer
    Thanks but all I did was add the 503 header to it. Zachary Johnson is the one who wrote the slick JS & CSS.
     
  7. thedudelady

    thedudelady Registered Member

    Joined:
    Jan 15, 2010
    Messages:
    93
    Likes Received:
    90
    Nice page, going to modify it and add to clients sites that don't pay
     
    • Thanks Thanks x 1
  8. Earthquake

    Earthquake Newbie

    Joined:
    Mar 10, 2009
    Messages:
    31
    Likes Received:
    16
    this is dope

    great work
     
  9. cringe

    cringe Newbie

    Joined:
    Jan 17, 2012
    Messages:
    13
    Likes Received:
    0
    Lookin awesome.
     
  10. mirrorer

    mirrorer Jr. VIP Jr. VIP

    Joined:
    Jan 30, 2009
    Messages:
    1,163
    Likes Received:
    1,030
    Done,added it to my site!
     
    • Thanks Thanks x 1
  11. captchadreams

    captchadreams Power Member

    Joined:
    Sep 19, 2008
    Messages:
    504
    Likes Received:
    131
    this is stupid.

    why would you shut down your sites when that's what you're trying to fight against anyway?

    I mean I understand it kinda.. but I think this one is a little dumb.
     
  12. _unknown_

    _unknown_ Junior Member

    Joined:
    Dec 17, 2008
    Messages:
    187
    Likes Received:
    94
    Location:
    Last page of Google
    If we all have sites that get traffic, and a large majority of the internet goes dark (like the template) for 24 hours, maybe the sheep will finally get it in their heads that the internet they know will be vastly different quite rapidly.


    Now if only Google will use that template too :)

    Which reminds me...Google has said that they oppose SOPA...Google also has billions upon billions of dollars - so it should be no doubt that they can afford to hire the same type of lobbyists that are pushing this bill through to kill this bill.

    If they fail to act, then we all know Google's true intentions...Just like how Obama said he will veto NDAA but passed it anyways
     
    • Thanks Thanks x 1
  13. captchadreams

    captchadreams Power Member

    Joined:
    Sep 19, 2008
    Messages:
    504
    Likes Received:
    131
    Last edited: Jan 18, 2012
  14. goodtimes

    goodtimes Power Member

    Joined:
    Jan 25, 2009
    Messages:
    531
    Likes Received:
    572
    Google has the link up.

    Just put up that template on my most high traffic sites and emailed several hundred clients that our sites are down in protest as well...

    Best share on BHW I've seen in a while!

    Everybody better jump on this while we can stand united against it.
     
    • Thanks Thanks x 1
  15. Baadier

    Baadier Regular Member

    Joined:
    Nov 25, 2011
    Messages:
    214
    Likes Received:
    39
    Location:
    Cape Town, South Africa
    brilliant js and css on that.
     
  16. Ayomav

    Ayomav Regular Member

    Joined:
    Nov 23, 2011
    Messages:
    250
    Likes Received:
    19
    wrong post.
     
  17. captchadreams

    captchadreams Power Member

    Joined:
    Sep 19, 2008
    Messages:
    504
    Likes Received:
    131
    too bad google won't go completely black for even an hour.. i wonder how many people would be freaking out.
     
  18. scriptstarcrew

    scriptstarcrew Newbie

    Joined:
    Dec 2, 2009
    Messages:
    46
    Likes Received:
    7
    Location:
    Jupiter
    Hey man, great work!

    is any way to add this page on a blogspot?
    If anybody knows please help.
    Thanks.
     
  19. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    950
    Likes Received:
    662
    Occupation:
    Web/Bot Developer
    Roughly 7000 sites participated in the blackout!

    Code:
    http://apcmag.com/anti-sopa-internet-blackout-today-said-to-number-7000-sites-going-dark.htm