2021/includes/banner.html

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