2020/includes/banner.html

   1   </head>
   2   <body>
   3
   4     <!-- Place banner here -->
   5     <iframe src="//static.libreplanet.org/nosvn/banners/2019fundraiser-fall/" width="100%" height="150px" scrolling="no"
   6       style="overflow: hidden; margin: 0; border: 0 none; display: block;">
   7     </iframe>
   8
   9     <!-- Place modal window here -->
  10
  11     <!-- begin fsf-modal-window-elem campaign element -->
  12             <link type="text/css" rel="stylesheet" href="https://static.fsf.org/nosvn/fonts/fa/css/font-awesome.min.css">
  13             <style>
  14 #fsf-modal-window-elem-container div {
  15     -webkit-box-sizing: border-box;
  16        -moz-box-sizing: border-box;
  17             box-sizing: border-box;
  18 }
  19
  20 @media screen and (min-width: 700px) {
  21
  22     #fsf-modal-window-elem-outer-v-center {
  23         display: table;
  24         position: absolute;
  25         height: 100%;
  26         width: 100%;
  27     }
  28     #fsf-modal-window-elem-inner-v-center {
  29         display: table-cell;
  30         vertical-align: middle;
  31     }
  32
  33     #fsf-modal-window-elem {
  34         width: 687px;
  35         margin-left: auto;
  36         margin-right: auto;
  37     }
  38
  39     #fsf-modal-window-elem-right-column {
  40         float: right;
  41         width: 280px;
  42         padding-left: 20px;
  43     }
  44
  45     #fsf-modal-window-elem-left-column {
  46         width: 100%;
  47         float: left;
  48         margin-right: -280px;
  49     }
  50
  51     #fsf-modal-window-elem-text {
  52         margin-right: 280px;
  53     }
  54 }
  55
  56 @media screen and (max-width: 699px) {
  57
  58     #fsf-modal-window-elem {
  59
  60         -ms-box-orient: horizontal;
  61         display: -webkit-box;
  62         display: -moz-box;
  63         display: -ms-flexbox;
  64         display: -moz-flex;
  65         display: -webkit-flex;
  66         display: flex;
  67
  68         -webkit-flex-flow: row wrap;
  69         flex-flow: row wrap;
  70     }
  71
  72     #fsf-modal-window-elem {
  73         width: 80vw;
  74         margin-left: 10vw;
  75         margin-right: 10vw;
  76         margin-top: 40px;
  77         margin-bottom: 40px;
  78     }
  79
  80     #fsf-modal-window-elem-right-column {
  81         width: 100%;
  82         order: 1;
  83     }
  84
  85     #fsf-modal-window-elem-left-column {
  86         width: 100%;
  87         order: 2;
  88     }
  89
  90     #fsf-modal-window-elem-text {
  91         margin-top: 20px;
  92     }
  93 }
  94
  95 @media screen and (max-width: 360px) {
  96     .long-button-text {
  97         font-size: 25px !important;
  98     }
  99 }
 100
 101 #fsf-modal-window-elem-container {
 102     position: fixed;
 103     z-index: 10000;
 104     left: 0;
 105     top: 0;
 106     width: 100%;
 107     height: 100%;
 108     overflow: auto;
 109     background-color: rgba(0,0,0,0.8);
 110
 111     font-weight: normal;
 112 }
 113
 114 #fsf-modal-window-elem a, a:active, a:focus {
 115     outline: none;
 116     border-bottom: 0px;
 117 }
 118
 119 #fsf-modal-window-elem {
 120     overflow: auto;
 121     zoom: 1;
 122     padding: 20px;
 123     border-style: solid;
 124     border-width: 5px;
 125     border-color: #ff00ff;
 126     border-radius: 20px;
 127     box-shadow: 0px 0px 10px #111111;
 128     background-color: #19003a;
 129 }
 130
 131 #fsf-modal-window-elem-header {
 132     width: 100%;
 133 }
 134
 135 #fsf-modal-window-elem-header h2 {
 136     font-family: sans-serif,"Helvetica",Arial;
 137     font-weight: bold;
 138     font-size: 24px;
 139     color: #edd400;
 140     text-shadow: 0px 0px 8px #00378c;
 141     padding-bottom: 20px;
 142     margin-top: 0px;
 143     margin-bottom: 0px;
 144     border: none;
 145 }
 146
 147 #fsf-modal-window-elem-close-button {
 148     float: right;
 149     height: 40px;
 150     margin-right: -20px;
 151     margin-top: -20px;
 152     padding: 11px;
 153     color: #888;
 154     cursor: pointer;
 155 }
 156
 157 #fsf-modal-window-elem-close-button:hover {
 158     color: #aaf;
 159 }
 160
 161 #fsf-modal-window-elem-right-column {
 162     text-align: center;
 163     -webkit-user-select: none;
 164        -moz-user-select: none;
 165         -ms-user-select: none;
 166             user-select: none;
 167 }
 168
 169 #fsf-modal-window-elem-buttons div {
 170     height:53.333px;
 171     line-height: 53.333px;
 172     margin-left:auto;
 173     margin-right:auto;
 174     display:block;
 175 }
 176
 177 #fsf-modal-window-elem-buttons {
 178 }
 179
 180 #fsf-modal-window-elem-buttons a {
 181     width: 100%;
 182     display: block;
 183     text-align:center;
 184     font-size:35px;
 185     color:#FFFFFF;
 186     text-decoration: none;
 187     font-family: sans-serif,"Helvetica",Arial;
 188     font-weight: normal;
 189 }
 190
 191 #fsf-modal-window-elem-maybe-later {
 192     margin-top: 5px;
 193     margin-bottom: -5px;
 194 }
 195
 196 #fsf-modal-window-elem-maybe-later a {
 197     color: #367c93;
 198     line-height: 20px;
 199     text-decoration: none;
 200     cursor: pointer;
 201     font-weight: normal;
 202     font-family: sans-serif,"Helvetica",Arial;
 203     font-size: 16px;
 204 }
 205
 206 #fsf-modal-window-elem-text {
 207 }
 208
 209 #fsf-modal-window-elem-text a {
 210     color: #edd400;
 211     font-weight: 700;
 212     text-decoration: none;
 213 }
 214
 215 #fsf-modal-window-elem-text a:hover {
 216     color: #fd8e1b;
 217 }
 218
 219 #fsf-modal-window-elem-text a:focus {
 220     color: #fd8e1b;
 221 }
 222
 223 #fsf-modal-window-elem-text a:active {
 224     color: #ffac30;
 225 }
 226
 227 #fsf-modal-window-elem-text p {
 228     font-family: sans-serif,"Helvetica",Arial;
 229     font-size: 18px;
 230     font-weight: normal;
 231     margin: 0px 0px 10px 0px;
 232     line-height: 20px;
 233     color: #ffffff;
 234     text-shadow: 0px 0px 8px #4600ba;
 235 }
 236             </style>
 237             <div id="fsf-modal-window-elem-container" style="display: none;">
 238                 <div id="fsf-modal-window-elem-outer-v-center">
 239                     <div id="fsf-modal-window-elem-inner-v-center">
 240                         <div id="fsf-modal-window-elem">
 241                             <div id="fsf-modal-window-elem-header">
 242                                 <div id="fsf-modal-window-elem-close-button" onclick="//fsfModalWindowElemDontShowForAWhile();">
 243                                     <i class="fa fa-close"></i>
 244                                 </div>
 245                                 <h2>Join us and make an impact!</h2>
 246                             </div>
 247                             <div id="fsf-modal-window-elem-left-column">
 248                                 <div id="fsf-modal-window-elem-text">
 249
 250 <p>
 251
 252 Our associate members are the heart of the FSF's commitment to a society where software respects our freedom and dignity. Every individual that takes a stand will help us reach our goal to welcome 600 new free software advocates by December 31st.
 253
 254 </p>
 255
 256 <p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=frfall2019&pk_kwd=learn-more&pk_source=modal">READ MORE</a> | <a href="https://my.fsf.org/join?pk_campaign=frfall2019&pk_source=modal2">JOIN</a></span></p>
 257
 258                                 </div>
 259                             </div>
 260                             <div id="fsf-modal-window-elem-right-column">
 261                                 <div id="fsf-modal-window-elem-buttons" style="border-radius: 20px; box-shadow: 0px 0px 5px #0c2b2b;">
 262                                     <div style="background-color:#ff00ff; border-top-right-radius: 20px; border-top-left-radius: 20px;">
 263                                       <a style="text-shadow: 0px 0px 8px #b300b3;" href="https://my.fsf.org/join?pk_campaign=frfall2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-check-circle">&nbsp;</i>Join</a>
 264                                     </div>
 265
 266                                     <div style="background-color:#930093">
 267                                       <a style="text-shadow: 0px 0px 8px #460046;" href="https://my.fsf.org/renew?pk_campaign=frfall2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-refresh"></i> Renew</a>
 268                                     </div>
 269
 270                                     <div style="background-color:#42009a; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; margin-bottom: 2px">
 271                                       <a style="text-shadow: 0px 0px 8px #22004e;" href="https://my.fsf.org/donate?pk_campaign=frfall2019&pk_source=modal" onclick="//fsfModalWindowElemFollowedLink();"><i class="fa fa-money"></i> Donate</a>
 272                                     </div>
 273                                 </div>
 274                                 <!--
 275                                 <div id="fsf-modal-window-elem-maybe-later">
 276                                     <a onclick="//fsfModalWindowElemMaybeLater();">maybe later</a>
 277                                 </div>
 278                                 -->
 279                             </div>
 280                         </div>
 281                     </div>
 282                 </div>
 283                 <script type="text/javascript">
 284 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0
 285
 286 // licensed GPLv3-or-later by Andrew Engelbrecht
 287
 288 var startTime, endTime, switchTextTime;
 289
 290 startTime = new Date('2019-11-18T04:00:00Z');
 291 switchTextTime = new Date('2019-12-12T04:00:00Z');
 292 endTime = new Date('2020-01-01T04:00:00Z');
 293
 294 // possibly switch the text that is displayed in the modal window, depending
 295 // upon the current date.
 296 function fsfModalWindowElemMaybeSwitchText () {
 297
 298     var now;
 299
 300     now = new Date();
 301     if (now.getTime() < switchTextTime.getTime()) {
 302         return; // don't switch the dbd text
 303     }
 304
 305     // switch dbd text
 306     document.getElementById("fsf-modal-window-elem-text").innerHTML =' \
 307 \
 308 <p>Our associate members are the heart of the FSF\'s commitment to a society where software respects our freedom and dignity. Every individual that takes a stand will help us reach our goal to welcome 600 new free software advocates by December 31st.</p> \
 309 \
 310 <p><span id="fsf-modal-window-text-link"><a href="https://www.fsf.org/appeal?pk_campaign=frfall2019&pk_kwd=learn-more&pk_source=modal">READ MORE</a> | <a href="https://my.fsf.org/join?pk_campaign=frfall2019&pk_source=modal2">JOIN</a></span></p>';
 311 }
 312
 313 // show fsf-modal-window-elem if it hasn't been previously closed by
 314 // the user, nor recently hit "maybe later",
 315 // and the campaign is still happening
 316 function fsfModalWindowElemMaybeShow () {
 317
 318     var pattern, noShowFsfModalWindowElementP, now;
 319
 320 //    now = new Date();
 321 //    if (now.getTime() < startTime.getTime() || now.getTime() > endTime.getTime()) {
 322 //        return; // don't show the fsf-modal-window-elem
 323 //    }
 324
 325     // see if cookie says not to show element
 326     pattern = /showFsfFall2019FundraiserModalWindowElementP\s*=\s*false/;
 327     noShowFsfModalWindowElementP = pattern.test(document.cookie);
 328
 329 //// uncomment here to enable modal window hiding
 330     if (!noShowFsfModalWindowElementP) {
 331         setTimeout(function () {
 332             // display the element
 333             document.getElementById("fsf-modal-window-elem-container").style.display="block";
 334         }, 0);
 335     }
 336 }
 337
 338 // call this first to set the proper text
 339 fsfModalWindowElemMaybeSwitchText();
 340 // call this right away to avoid flicker
 341 fsfModalWindowElemMaybeShow();
 342
 343
 344 // get the time `plusDays` in the future.
 345 // can be a fraction.
 346 function daysInFuture (plusDays) {
 347     var now, future;
 348
 349     now = new Date();
 350     future = new Date(now.getTime() + Math.floor(1000 * 60 * 60 * 24 * plusDays));
 351     return future.toGMTString();
 352 }
 353
 354 // hide the fsf-modal-window-elem
 355 function fsfModalWindowElemHide () {
 356     document.getElementById("fsf-modal-window-elem-container").style.display="none";
 357 }
 358 // optionally hide elem and set a cookie to keep the fsf-modal-window-elem hidden for the next `forDays`.
 359 function fsfModalWindowElemDontShowForDays (forDays, hideNow) {
 360     if (hideNow === true) {
 361         fsfModalWindowElemHide();
 362     }
 363     //document.cookie = "showFsfFall2019FundraiserModalWindowElementP=false; path=/; domain=.fsf.org; expires=" + daysInFuture(forDays);
 364     document.cookie = "showFsfFall2019FundraiserModalWindowElementP=false; path=/; expires=" + daysInFuture(forDays);
 365 }
 366
 367 // hide the element from now to two weeks after closing it
 368 function fsfModalWindowElemDontShowForAWhile () {
 369     fsfModalWindowElemDontShowForDays(14, true);
 370 }
 371 // hide the element from now to past the date of the campaign
 372 //function fsfModalWindowElemDontShowAgain () {
 373 //    fsfModalWindowElemDontShowForDays(120, true);
 374 //}
 375 // don't show the element for a while
 376 //function fsfModalWindowElemMaybeLater () {
 377 //    fsfModalWindowElemDontShowForDays(1, true);
 378 //}
 379 // keep the element visible for now, but don't show it for a while
 380 function fsfModalWindowElemFollowedLink () {
 381     fsfModalWindowElemDontShowForDays(14, false);
 382 }
 383
 384 // close popup if user clicks trasparent part
 385 document.getElementById("fsf-modal-window-elem-container").addEventListener("click", function(event){
 386     fsfModalWindowElemDontShowForAWhile();
 387 });
 388 // don't close popup if clicking non-trasparent part (with the text and buttons)
 389 document.getElementById("fsf-modal-window-elem").addEventListener("click", function(event){
 390     event.stopPropagation();
 391 });
 392 // close popup if user clicks X icon
 393 document.getElementById("fsf-modal-window-elem-close-button").addEventListener("click", function(event){
 394     fsfModalWindowElemDontShowForAWhile();
 395 });
 396 //// close popup if user clicks maybe-later div
 397 //document.getElementById("fsf-modal-window-elem-maybe-later").addEventListener("click", function(event){
 398 //    fsfModalWindowElemMaybeLater();
 399 //});
 400 // disable popup if user clicks one of the main buttons
 401 document.getElementById("fsf-modal-window-elem-buttons").addEventListener("click", function(event){
 402     fsfModalWindowElemFollowedLink();
 403 });
 404 // disable popup if user clicks one of the "Read more" link
 405 document.getElementById("fsf-modal-window-text-link").addEventListener("click", function(event){
 406     fsfModalWindowElemFollowedLink();
 407 });
 408 // close popup if user presses escape key
 409 window.addEventListener("keydown",  function  (event)  {
 410     switch  (event.key)  {
 411         case  "Escape":
 412             fsfModalWindowElemDontShowForAWhile();
 413             break;
 414         default:
 415             return;
 416     }
 417 },  true);
 418
 419 // @license-end
 420                 </script>
 421             </div>
 422             <!-- end fsf-modal-window-elem campaign element -->
 423
 424     <div id="wrapper"> <!-- start of wrapper -->
 425       <div class="lp-banner hidden-xs"> <!--start of lp banner -->
 426                 <div class="container"> <!-- start of container -->
 427                   <div class="row">
 428                         <div class="lp-head"> <!-- start of lp header -->
 429                           <div class="lp-logo col-sm-3 col-xs-5">
 430                                 <a href="/2020/">
 431                                   <img src="/2020/assets/img/logo.svg"
 432                                            class="img-responsive"
 433                                            alt="[ LibrePlanet 2020 ]" />
 434                                 </a>
 435                           </div>
 436                           <div class="lp-date-place col-sm-5 col-xs-2">
 437                             <!-- Heads up! When updating this date and place information,
 438                                  remember to update it in the small
 439                                  screen navbar too (see below) -->
 440                       <p><br><strong>Boston area<br />
 441                               March 14-15, 2020</strong></p>
 442                           </div>
 443                           <!-- #top-right-desktop start -->
 444                           <!--#include virtual="/2020/includes/register-now.html"-->
 445                           <!-- #top-right-desktop end -->
 446                           <!-- #top-right-desktop start -->
 447                           <!--#include virtual="/2020/includes/join-list.html"-->
 448                           <!-- #top-right-desktop end -->
 449                         </div><!-- end of lp header -->
 450
 451                   </div>
 452                 </div> <!-- end of header container -->
 453       </div> <!-- end of lp banner -->
 454
 455       <!-- start nav for small screens -->
 456       <nav class="navbar navbar-default visible-xs">
 457         <div class="container-fluid">
 458           <!-- Brand and toggle get grouped for better mobile display -->
 459           <div class="navbar-header">
 460             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
 461                     data-target="#lp-navbar-collapse" aria-expanded="false">
 462               <span class="sr-only">Toggle navigation</span>
 463               <span class="icon-bar"></span>
 464               <span class="icon-bar"></span>
 465               <span class="icon-bar"></span>
 466             </button>
 467             <a class="navbar-brand" href="/2020/">
 468               <img src="/2020/assets/img/logo.svg"
 469                    style="max-width: 100px"
 470                    class="img-responsive"
 471                    alt="[ LibrePlanet 2020 ]" />
 472             </a>
 473             <p class="navbar-text">
 474                <!-- Heads up! When updating date place, remember to
 475                update it in the lp banner too (see above) -->
 476                 Boston area<br />March 14-15, 2020
 477             </p>
 478           </div>
 479
 480           <div class="collapse navbar-collapse" id="lp-navbar-collapse">
 481
 482             <ul class="nav navbar-nav">
 483               <!--#include virtual="/2020/includes/nav-list-1.html"-->
 484             </ul>
 485
 486             <ul class="nav navbar-nav">
 487               <!--#include virtual="/2020/includes/nav-list-2.html"-->
 488             </ul>
 489           </div><!-- navbar-collapse end -->
 490         </div><!-- navbar container-fluid end -->
 491       </nav>
 492       <!-- end nav for small screens -->