Looking to add the International Day Against DRM (IDAD) modal window to your Web site? Copy the following and paste it near the top of the contents of the "body" tag on your Web page.
This code combines a link tag, style tags and other html into a single chunk of code that can be placed under your body tag. Depending on your site's content security policy, or for the sake of elegance, you might want to put the link and style tags into the header section of your site.
<!-- begin fsf-dbd-elem campaign element -->
<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;
}
</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>Take a stand against digital restrictions!</h2>
</div>
<div id="fsf-dbd-elem-left-column">
<div id="fsf-dbd-elem-text">
<p><a
href="https://www.defectivebydesign.org/what_is_drm_digital_restrictions_management/?pk_campaign=idad2018&pk_kwd=mw1_widrm">Digital
Restrictions Management (DRM)</a> is a technology that unethically restricts
how you can use a variety of media files, hardware, and the Web. The legal
policies that make DRM work harm independent security researchers, people who
want to repair their devices, and all users.</p>
<p><strong>September 18th</strong> is <a
href="https://dayagainstdrm.org/?pk_campaign=idad2018&pk_kwd=mw1_main">International
Day Against DRM (IDAD)</a>. <a
href="https://my.fsf.org/civicrm/petition/sign?sid=8&reset=1&pk_campaign=idad2018&pk_kwd=mw1_petition">Join
us</a> as we take action against DRM and celebrate the vision of a DRM-free
world.</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://my.fsf.org/civicrm/petition/sign?sid=8&reset=1&pk_campaign=idad2018&pk_kwd=mw1_petition_button"><i class="fa fa-check-circle"> </i>RSVP</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://dayagainstdrm.org/?pk_campaign=idad2018&pk_kwd=mw1_main_button"><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-28T04:00:00Z');
switchTextTime = new Date('2018-09-18T04:00:00Z');
endTime = new Date('2018-09-19T04: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> \
\
Today is <a href="https://dayagainstdrm.org/?pk_campaign=idad2018&pk_kwd=mw2_main">International Day Against DRM (IDAD)<\/a>! Join us as people around the Web and the world take action against <a href="https://www.defectivebydesign.org/what_is_drm_digital_restrictions_management/?pk_campaign=idad2018&pk_kwd=mw2_widrm">Digital Restrictions Management (DRM)<\/a> and celebrate the vision of a DRM-free world. \
\
<\/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://dayagainstdrm.org/?pk_campaign=idad2018&pk_kwd=mw2_main_button"
}
// 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 -->