Copyright directive modal window for your website

The European Copyright directive threatens online communication in Europe. On September 12th the European parliament takes the crucial vote which can still fix it. But the parliamentarians (MEPs) need to hear our voices.

If you care about the future of the Internet in the EU, please Call your MEPs!

And if you have a website and want to inform your visitors about this vote, copy the following and add it to your site:

    <!-- begin fsf-dbd-elem campaign element -->
    <!-- this campaign element was repurposed for the fight to fix the European Copyright directive, using freedom 1 of the four freedoms granted by the GPLv3 -->
            <link type="text/css" rel="stylesheet" href="https://static.fsf.org/nosvn/fonts/fa/css/font-awesome.min.css">
            <style>
#fsf-dbd-elem-container div {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

@media screen and (min-width: 700px) {

    #fsf-dbd-elem-outer-v-center {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    #fsf-dbd-elem-inner-v-center {
        display: table-cell;
        vertical-align: middle;
    }

    #fsf-dbd-elem {
        width: 687px;
        margin-left: auto;
        margin-right: auto;
    }

    #fsf-dbd-elem-right-column {
        float: right;
        width: 280px;
        padding-left: 20px;
    }

    #fsf-dbd-elem-left-column {
        width: 100%;
        float: left;
        margin-right: -280px;
    }

    #fsf-dbd-elem-text {
        margin-right: 280px;
    }
}

@media screen and (max-width: 699px) {

    #fsf-dbd-elem {

        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    #fsf-dbd-elem {
        width: 80vw;
        margin-left: 10vw;
        margin-right: 10vw;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    #fsf-dbd-elem-right-column {
        width: 100%;
        order: 1;
    }

    #fsf-dbd-elem-left-column {
        width: 100%;
        order: 2;
    }

    #fsf-dbd-elem-text {
        margin-top: 20px;
    }
}

@media screen and (max-width: 360px) {
    .long-button-text {
        font-size: 25px !important;
    }
}

#fsf-dbd-elem-container {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);

    font-weight: normal;
}

#fsf-dbd-elem a, a:active, a:focus {
    outline: none;
}

#fsf-dbd-elem {
    overflow: auto;
    zoom: 1;
    padding: 20px;
    border-style: solid;
    border-width: 5px;
    border-color: rgb(254, 203, 0);
    border-radius: 20px;
    box-shadow: 0px 0px 10px #111111;
    background: #ffffff url("https://www.defectivebydesign.org/sites/all/themes/dbd2/images/repeat-offenders-bg.png") top left repeat;
}

#fsf-dbd-elem-header {
    width: 100%;
}

#fsf-dbd-elem-header h2 {
    font-family: sans-serif,"Helvetica",Arial;
    font-weight: bold;
    font-size: 24px;
    color: black;
    text-shadow: 0px 0px 8px #ffffff, 0px 0px 8px #ffffff;
    padding-bottom: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    border: none;
}

#fsf-dbd-elem-close-button {
    float: right;
    height: 40px;
    margin-right: -20px;
    margin-top: -20px;
    padding: 11px;
    color: #888;
    cursor: pointer;
}

#fsf-dbd-elem-close-button:hover {
    color: #aaf;
}

#fsf-dbd-elem-right-column {
    text-align: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#fsf-dbd-elem-buttons div {
    height:53.333px;
    line-height: 53.333px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

#fsf-dbd-elem-buttons {
}

#fsf-dbd-elem-buttons a {
    width: 100%;
    display: block;
    text-align:center;
    font-size:35px;
    color:#000000;
    text-decoration: none;
    font-family: sans-serif,"Helvetica",Arial;
    font-weight: normal;
}

#fsf-dbd-elem-maybe-later {
    margin-top: 5px;
    margin-bottom: -5px;
}

#fsf-dbd-elem-maybe-later a {
    color: #4298b5;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    font-weight: normal;
    font-family: sans-serif,"Helvetica",Arial;
    font-size: 16px;
}

#fsf-dbd-elem-text {
    text-align: left;
}

#fsf-dbd-elem-text a {
    color: #e64c22;
    font-weight: 700;
    text-decoration: none;
}

#fsf-dbd-elem-text a:hover {
    color: #bc1b1b;
}

#fsf-dbd-elem-text a:focus {
    color: #bc1b1b;
}

#fsf-dbd-elem-text a:active {
    color: black;
}

#fsf-dbd-elem-text p {
    font-family: sans-serif,"Helvetica",Arial;
    font-size: 16px;
    font-weight: normal;
    margin: 0px 0px 10px 0px;
    line-height: 20px;
    color: black;
    text-shadow: 0px 0px 8px #ffffff, 0px 0px 8px #ffffff;
}

#fsf-dbd-elem-text li {
    font-family: sans-serif,"Helvetica",Arial;
    font-size: 14px;
    font-weight: normal;
    margin: 0px 0px 10px 0px;
    line-height: 20px;
    color: black;
    text-shadow: 0px 0px 8px #ffffff, 0px 0px 8px #ffffff;
}
            </style>
            <div id="fsf-dbd-elem-container" style="display: none;">
                <div id="fsf-dbd-elem-outer-v-center">
                    <div id="fsf-dbd-elem-inner-v-center">
                        <div id="fsf-dbd-elem">
                            <div id="fsf-dbd-elem-header">
                                <div id="fsf-dbd-elem-close-button" onclick="fsfDBDElemDontShowAgain();">
                                    <i class="fa fa-close"></i>
                                </div>
                                <h2>Sep. 12th decides the fate of the internet in the EU!</h2>
                            </div>
                            <div id="fsf-dbd-elem-left-column">
                                <div id="fsf-dbd-elem-text">

<p>The <a
href="https://juliareda.eu/eu-copyright-reform/">European Copyright directive</a> threatens online communication in Europe.<ul><li>Article 13 would require every site where you can share to <a href="https://twitter.com/ArneBab/status/1034823956107325440">build or buy massive censorship infrastructure</a>.</li><li>Article 12 would <a href="https://juliareda.eu/2018/09/copyright-sports-fans/">make it illegal to share a photo from a football game</a>.</li><li>Article 11 would require <a href="https://juliareda.eu/2018/09/copyright-showdown/">license fees for links</a>.</li><li>Article 3 would forbid working with information you find online.</ul></p>

<p>But thanks to <a href="https://juliareda.eu/2018/08/saveyourinternet-action-day/">massive shared action earlier this year</a>, the European parliament <a href="https://juliareda.eu/2018/09/copyright-showdown/">can still prevent the problems</a>. For each of the articles there are proposals which fix them. The parliamentarians (MEPs) just have to vote for them. And since they are under massive pressure from large media companies, that went as far as defaming those who took action as <em>fake people</em>, the MEPs <strong>need to hear your voice</strong> to know that your are real.</p>

<p>If you care about the future of the Internet in the EU, please <a href="https://saveyourinternet.eu/">Call your MEPs</a>.</p>

                                </div>
                            </div>
                            <div id="fsf-dbd-elem-right-column">
                                <div id="fsf-dbd-elem-buttons" style="border-radius: 20px;">
                                    <div id="button_0" style="background-color: rgb(230, 76, 34); border-radius: 20px; a {color: rgb(188, 27, 27) !important}; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); margin-bottom: 26.667px;">
                                      <a href="https://saveyourinternet.eu/"><i class="fa fa-check-circle"> </i>Call MEPs</a>
                                    </div>

                                    <div id="button_1" style="background-color: rgb(254, 203, 0); border-radius: 20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);">
                                      <a class="long-button-text" href="https://juliareda.eu/2018/09/copyright-showdown/"><i class="fa fa-globe"></i> Learn More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later

var startTime, endTime, fsfDBDElemMaybeShow, daysInFuture, fsfDBDElemHide, fsfDBDElemDontShowForDays;

startTime = new Date('2018-08-28T00:00:00Z');
switchTextTime = new Date('2018-09-11T00:00:00Z');
endTime = new Date('2018-09-13T00:00:00Z');

// possibly switch the text that is displayed in the modal window, depending
// upon the current date.
function fsfDBDElemMaybeSwitchText () {

    var now;

    now = new Date();
    if (now.getTime() < switchTextTime.getTime()) {
        return; // don't switch the dbd text
    }

    // switch dbd text
    document.getElementById("fsf-dbd-elem-text").innerHTML =' \
                                    <p> \
\
Tomorrow the European parliament decides the fate of the Internet in the EU! \
\
                                    <\/p>\
                                    <p> \
\
<a href="https://saveyourinternet.eu/">Call your MEPs today</a>! \
\
                                    <\/p>';

    // remove button_0
    button_0 = document.getElementById("button_0");
    button_0.parentNode.removeChild(button_0);

    // change href in button_1
    document.getElementById("button_1").children[0].href = "https://juliareda.eu/2018/09/copyright-showdown/"
}

// show fsf-dbd-elem if it hasn't been previously closed by
// the user, nor recently hit "maybe later",
// and the campaign is still happening
function fsfDBDElemMaybeShow () {

    var pattern, noShowDBD2018IDADElementP, now;

    now = new Date();
    if (now.getTime() < startTime.getTime() || now.getTime() > endTime.getTime()) {
        return; // don't show the fsf-dbd-elem
    }

    // see if cookie says not to show element
    pattern = /showDBD2018IDADElementP\s*=\s*false/;
    noShowDBD2018IDADElementP = pattern.test(document.cookie);

    if (!noShowDBD2018IDADElementP) {
        setTimeout(function () {
            // display the element
            document.getElementById("fsf-dbd-elem-container").style.display="block";
        }, 0);
    }
}

// call this first to set the proper text
fsfDBDElemMaybeSwitchText();
// call this right away to avoid flicker
fsfDBDElemMaybeShow();


// get the time `plusDays` in the future.
// can be a fraction.
function daysInFuture (plusDays) {
    var now, future;

    now = new Date();
    future = new Date(now.getTime() + Math.floor(1000 * 60 * 60 * 24 * plusDays));
    return future.toGMTString();
}

// hide the fsf-dbd-elem
function fsfDBDElemHide () {
    document.getElementById("fsf-dbd-elem-container").style.display="none";
}
// optionally hide elem and set a cookie to keep the fsf-dbd-elem hidden for the next `forDays`.
function fsfDBDElemDontShowForDays (forDays, hideNow) {
    if (hideNow === true) {
        fsfDBDElemHide();
    }
    //document.cookie = "showDBD2018IDADElementP=false; path=/; domain=.fsf.org; expires=" + daysInFuture(forDays);
    document.cookie = "showDBD2018IDADElementP=false; path=/; expires=" + daysInFuture(forDays);
}

// hide the element from now to past the date of the campaign
function fsfDBDElemDontShowAgain () {
    fsfDBDElemDontShowForDays(120, true);
}
// don't show the element for a while
function fsfDBDElemMaybeLater () {
    fsfDBDElemDontShowForDays(1, true);
}
// keep the element visible for now, but don't show it on future page loads
function fsfDBDElemFollowedLink () {
    fsfDBDElemDontShowForDays(120, false);
}

// close popup if user clicks trasparent part
document.getElementById("fsf-dbd-elem-container").addEventListener("click", function(event){
    fsfDBDElemDontShowAgain();
});
// don't close popup if clicking non-trasparent part (with the text and buttons)
document.getElementById("fsf-dbd-elem").addEventListener("click", function(event){
    event.stopPropagation();
});

// @license-end
                </script>
            </div>
            <!-- end fsf-dbd-elem campaign element -->

(this code is based on the day against DRM modal window by the FSF, licensed under GPLv3+)